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Ce livre sur le HTML5 et CSS3 s'adresse a toute personne appelee a developper, mettre en place, faire vivre un site Web. En effet, pour debuter 
mais surtout pour progresser dans la conception de sites, il faut inevitablement passer par une bonne comprehension et une bonne maitrise du 
code source des applications Web. 

Le livre est concu comme un reel outil de formation, pedagogique de la premiere a la derniere page, abondamment illustre d'exemples et de 
captures d'ecran et constamment a I'affut des elements reellement pratiques pour le webmestre. 

Sont ainsi passes en revue le HTML (dans sa derniere version et ses nombreuses nouveautes), les feuilles de style avec I'avancee spectaculaire 
des CSS3 en termes de presentation des pages Web et quelques elements de JavaScript... Cet ouvrage n'est surtout pas une encyclopedie 
exhaustive de ces differentes techniques mais un parcours structure de celles-ci. II fournit aux concepteurs debutants, voire plus confirmes, les 
regies rigoureuses mais essentielles de la conception professionnelle d'un site Web. En effet, I'auteur s'est attache a encourager I'elaboration 
d'un code respectueux des prescriptions du W3C et particulierement de la separation du contenu (HTML) et de la presentation (feuilles de style 
CSS) comme le preconise plus que jamais le HTML5. 

Les nombreuses nouveautes abordees ne sont prises en compte que par les dernieres versions des navigateurs (Internet Explorer 9, Firefox 3.6 
et 4, Google Chrome ou Safari) mais I'auteur a ete particulierement attentif a fournir un code compatible avec des navigateurs moins evolues afin 
de pouvoir beneficier des a present de ce pas important dans la conception des applications Web. 

Les nombreux exemples du livre sont en telechargement sur www.editions-eni.fr. Pour les lecteurs desirant reproduire les exemples a I'identique, 
les images et autres complements y sont egalement a leur disposition. 

Les chapitres du livre : 

Avant-propos - Presentation du Htlm5 - Premiers elements de feuilles de style - Le texte - La structuration du document - Les liens - Les tableaux - 
Les images et arrieres-plans - Les balises semantiques et d'organisation - Les formulaires - Le multimedia - Le dessin 2D - La geolocalisation - 
Presentation des feuilles de style - Notions de base des CSS - La police de caracteres - Le texte en CSS - Les listes et les tableaux - Les arriere- 
plans - Les proprietes de boite - Les pseudo-classes - Les proprietes d'affichage - Les proprietes d'impression - Les feuilles de style CSS3 



Des les debuts d'lnternet, Luc Van Lancker, enthousiasme par I'idee de communication universelle que vehiculait ce concept, s'est 
completement investi dans ce domaine. C'est un formateur passionne, tres au fait des nouvelles technologies liees au Web et grand 
pedagogue. 

Ce livre numerique a ete concu et est diffuse dans le respect des droits d'auteur. Toutes les marques citees ont ete deposees par leur editeur respectif. La loi du 1 1 Mars 
1957 n'autorisant aux termes des alineas 2 et3de /'article 4 1, d'une part, que les "copies ou reproductions strictement reservees a I'usage prive du copiste et non destinees 
a une utilisation collective", et, d'autre part, que les analyses et les courtes citations dans un but d'exempie et d'illustration, "toute representation ou reproduction integrate, 
ou partielle, faite sans le consentement de I'auteur ou de ses ayants droit ou ayant cause, est illicite" (alinea 1er de /'article 40). Cette representation ou reproduction, par 
quelque precede que ce soil, constituerait done une contrefagon sanctionnee par les articles 425 et suivants du Code Penal. Copyright Editions ENI 

Ce livre numerique integre plusieurs mesures de protection dont un marquage lie a votre identifiant visible sur les principales images. 
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Avant-propos 



L'ecriture de ce livre sur le Html5 et le CSS3 a ete une entreprise tres motivante. Le Html n'avait pas connu devolution 
majeure depuis 1998 avec le Html 4.0. Une eternite a I'echelle du developpement du Web et d'Internet ! II est 
important d'evaluer les evolutions et apports de cette nouvelle version du langage qui est a la base de cet outil 
devenu quotidien qu'est le Web. De leur cote, les feuilles de style CSS3 constituent une reelle avancee au niveau du 
graphisme des pages avec, par exemple, les bords arrondis, la transparence des images, les ombres ou la 
typographie. 

Cet ouvrage sur le Html5 et les CSS3 se veut avant tout un ouvrage structure et formatif plutot qu'une exploration 
exhaustive des nouveautes apportees par ces deux technologies. II vise deux publics bien distincts : 

• Les debutants pourront apprehender les bases du langage source des pages de la toile au fil des chapitres 
grace a de nombreux exemples complets, illustres a chaque fois par des captures d'ecran et la possibility de les 
visionner sur leur ecran, via I'espace de telechargement consacre a cet ouvrage. lis pourront ainsi entamer leur 
apprentissage de la conception de pages Web par la derniere evolution du Html qui est d'ores et deja 
operationnelle dans de nombreux navigateurs de la derniere generation et qui sera le standard des annees 
futures. 

• Ce livre s'adresse aussi aux concepteurs familiarises au Html et qui souhaitent decouvrir les apports et 
nouveautes du Html5 et des CSS3. Les differences par rapport au Html 4.0, parfois subtiles mais 
determinantes, sont mises en evidence tout au long de I'ouvrage. lis pourront aussi decouvrir les reelles 
nouveautes du Html5 avec les chapitres dedies aux nouveaux champs de formulaires, au dessin 2D, aux 
nouvelles balises audio et video et a I'entree du JavaScript avec, par exemple, la geolocalisation de I'utilisateur. 
L'important chapitre sur les CSS3 les convaincra de la revolution qu'elles vont apporter dans le design de la 
page, les debarrassant du passage oblige par des programmes graphiques. 

Cet ouvrage marque egalement un tournant dans I'apprentissage du code source des pages de la toile. En effet, le 
Html5 fait table rase de tout aspect de presentation pour se consacrer exclusivement a la structure du document. II 
n'est done plus possible en Html5 d'aligner du texte ou autres elements ou de dessiner des bordures de tableaux. 
Termine aussi I'ajout de couleur au texte ou en arriere-plan. Le Html5 se decline desormais de fagon austere, en noir et 
blanc ! Tous les elements de presentation doivent obligatoirement etre repris par les feuilles de style. II n'est plus 
possible de concevoir un apprentissage de maniere traditionnelle avec une partie exclusivement consacree au Html et 
une seconde partie distincte pour les feuilles de style. Ces deux elements sont maintenant intimement lies. Ainsi, il 
nous a semble utile, voire indispensable, d'introduire des I'apprentissage du Html des elements basiques relatifs aux 
feuilles de style. Cela permettra a I'apprenant de concevoir ses premieres applications d'une maniere plus realiste et 
plus attrayante. 

Entrons plus profondement dans le detail des chapitres. La partie Html debute par les elements basiques et 
traditionnels de I'apprentissage du code source. Le Html5 est en premier lieu une evolution du Html 4.0. II reste done 
un langage de balises. Les premiers elements de I'apprentissage progressif concernent le texte, la structuration du 
document avec les titres et les listes, les tableaux, les images et leur insertion, sans oublier ce qui fait I'essence du 
langage Html e'est-a-dire les liens. Une serie de chapitres aborde ensuite les nouveautes introduites par le Html5. 

• Les nouvelles balises semantiques qui permettent d'organiser le code source des applications afin d'en assurer 
une meilleure lisibilite. 

• II faut bien avouer que les formulaires traditionnels comme la ligne ou la zone de texte, les boutons radio, a 
choix multiples ou autres boutons de commandes entrainent une lassitude certaine dans I'aspect visuel de la 
page. Les apports du Html5 vont revolutionner les formulaires avec des lignes de texte avec suggestions, des 
calendriers, des compteurs numeriques, des curseurs, une validation sans passer par le JavaScript et bien 
d'autres surprises a decouvrir dans le chapitre qui leur est consacre. 

• Les nouvelles balises audio et video permettent desormais de lire de fagon native les fichiers multimedia sans 
devoir passer par des plugins divers, souvent sources de complications. 

• Le dessin 2D ouvre de nouvelles perspectives car il est desormais possible, par exemple, d'ajouter des 
graphiques directement par le code, sans passer par des captures d'ecran de programmes comme Excel. 

• Pour terminer, il fallait souligner que le Html5 marque aussi I'introduction du JavaScript comme un acteur 
privilegie dans la conception des applications Web. Ce dernier point est illustre par la geolocalisation de 
I'internaute. 

Poursuivons avec la partie dediee aux feuilles de style CSS. Dans un apprentissage progressif et structure, il n'est pas 
possible d'ignorer les desormais elementaires CSS1 et CSS2. Plusieurs chapitres sont ainsi consacres aux feuilles de 
style relatives a la police de caracteres, au texte, aux listes et tableaux, a la couleur, aux marges interieures et 
exterieures, aux pseudo-classes et aux feuilles de style relatives a I'affichage ou a I'impression. Cette partie se termine 



© ENI Editions - All rights reserved - Algeria Educ 



- 1- 



par les specifications CSS3 qui vont profondement modifier I'aspect visuel de la navigation sur la toile. Ce chapitre ne 
manquera pas d'interesser ceux qui, de pres ou de loin, prennent en charge I'aspect graphique des sites. Parmi les 
apports de ces feuilles de style CSS3, citons : 

• Les bords arrondis qui permettent de sortir de la presentation rectangulaire et angulaire des divisions. 

• Les ombres que Ton peut apporter au texte ou aux images sans passer par une application graphique. 

• Les polices que le concepteur pourra enfin choisir librement, marquant ainsi I'introduction tant attendue de la 
typographie dans la conception des pages web. 

• La presentation d'un contenu textuel en colonnes. 

• Les bordures imagees. 

• Les arriere-plans multiples. 

• Les degrades de couleurs. 

• La possibility de jouer sur I'opacite ou la transparence d'elements comme les images. 

A n'en pas douter, cet ouvrage est dense mais presente dans un langage que nous avons voulu clair, formatif et 
pedagogique. 

En tant qu'auteur, je dois avouer que j'ai pris un enorme plaisir a ecrire ce livre sur le Html5 et les CSS3. Je fais le 
souhait que ce plaisir soit partage avec les lecteurs. 
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Bref historique du Html5 



Nous debutons cet historique en 1998 avec la finalisation de la specification Html 4.0. Mis a part une legere revision en 
1999 avec le Html 4.01, plus rien de neuf a I'horizon de ce langage premier du Web. Le W3C (World Wide Web 
Consortium), I'organisme qui gere les standards d'ecriture sur la toile, n'a-t-il pas annonce a I'epoque que le Html dans 
sa version 4.0 ne connaitrait a I'avenir plus de developpement, en bref que le Html etait mort ? 

Le W3C avait aussi edite en 1998 le XML (extensible Markup Language ou, en frangais, le langage extensible de balises) 
pour gerer de fagon structuree des donnees de type texte, I'aspect extensible permettant a I'utilisateur de definir son 
propre langage avec ses elements distincts. Le W3C recommandait a I'epoque fortement le XML pour exprimer des 
langages de balisages specifiques. 

Une des premieres applications concretes du XML fut la reformulation du Html 4.0 selon la syntaxe stricte et formaliste 
du XML. Le Xhtml 1.0 apparut ainsi en 2000. Si les developpeurs ont unanimement salue la rigueur que le Xhtml 
apportait a I'ecriture du code, il faut bien constater que la migration vers le Xhtml n'a pas remporte le succes souhaite et 
que bon nombre de concepteurs sont restes fideles au Html 4.0 transitional, plus souple. 

Tres rapidement, le W3C mit en chantier I'ambitieux projet du Xhtml 2.0 qui devait faire table rase du passe en matiere 
de publication sur la toile. Cette position induisait que le Xhtml 2.0 ne serait pas retrocompatible avec ce qui existait a 
I'epoque et done avec le Html. 

Cette absence de retrocompatibilite a engendre un mecontentement certain aupres des firmes qui developpaient les 
navigateurs. 

Ce qui eut pour consequence la creation d'un groupe dissident, le WHATWG (Web Hypertext Application Technology 
Working Group). Ce groupe de travail se presente notamment comme une reponse a la lenteur du developpement des 
standards par le W3C et au caractere trop ferme de son processus interne d'elaboration de specifications. II se 
compose a I'origine de representants de firmes comme Mozilla, Opera et Apple dont les navigateurs Firefox, Opera et 
Safari sont bien connus. lis furent rejoints ensuite par Google. Leur position etait diametralement opposee a celle du 
Xhtml 2.0 en travaillant de fagon pragmatique sur base des implementations actuelles et done du Html 4.0. Leurs 
premieres realisations portaient sur les Web Forms 2.0 pour renouveler les formulaires et le nouveau concept de 
publication sur le web, Web Apps 1.0 soit des applications Web. 

Parallelement le Hhtml 2.0, meme si un brouillon (working draft) parait en j u i I let 2006, connait un developpement 
particulierement laborieux et la rumeur rapporte de nombreuses dissensions au sein de ce groupe de travail. En outre, 
les differents navigateurs precites boudaient deliberement le Html 2.0. 

II apparaissait clairement que le Xhtml 2.0 connaissait de gros problemes. Sir Tim Berners-Lee, inventeur du Web et 
president du W3C, decida fin 2006, de rouvrir un groupe de travail sur le Html qui, de fagon pragmatique, devait 
reprendre la suite des travaux du WHATWG. Ainsi, il y eut pendant tout un temps, le groupe de travail sur le Xhtml 2.0 
et celui sur le Html5. Ce dernier publia le 22 janvier 2008, un premier brouillon de travail qui a connu de nombreuses 
evolutions depuis. 

Mais les jours du Xhtml 2.0 etaient comptes. Fin 2009, le meme Sir Tim Berners-Lee annonce la dissolution du groupe de 
travail sur le Xhtml 2.0 et I'abandon definitif de ce dernier. 

On annonce pour 2012, la candidate recommandation du Html5 pour 2012 et, etant donne I'ampleur des nouveautes 
annoncees, la recommandation finale pour... 2022. 

L'annonce du Html5 a fait grand bruit (un buzz dans le vocabulaire moderne). Cet interet s'est rapidement concretise a 
differents niveaux. Google a incorpore tres rapidement, soit a partir de la version 5 de Chrome des elements du Html5. 
Ses autres comparses du WHATWG egalement avec les versions recentes de Firefox, Safari et Opera. Meme Microsoft, 
pourtant souvent a la trame en matiere d'adoption de nouveautes et de standards incorpore le Html5 dans la version 9 
d'Internet Explorer. De leur cote, les smartphones adoptent egalement le standard Html5, que ce soit Apple avec son 
iPhone, RIM avec son BlackBerry, Google avec son Google Phone, etc. Est-ce encore une evolution ? N'est-ce pas une 
revolution ? 

Parallelement, une reformulation du Html5 selon les regies et la syntaxe du XML est en cours d'elaboration. Celle-ci 
porte le nom de Xhtml5. 

De cette gestation mouvementee du Html5, on retiendra : 

• Que Ton ne parle plus de pages Web mais du concept plus large d'applications Web. 

• Que le Html5 est une evolution (importante certes) du Html 4.0. 

• Que le Html5 a ete congu directement par les navigateurs les plus innovants du marche comme Firefox, Safari 
Opera et Google. Ce qui est la garantie d'une adoption rapide des standards du Html5. 

• Que Ton peut s'attendre avec le Html5 a de grands changements concernant les formulaires (voir les Web Forms 
2.0). 

• Qu'apres plus d'une decennie sans reelles nouveautes, le Html5 correspond a un reel besoin des concepteurs 
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pour renouveler I'interface des applications Web. 
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Lignes de force du Html5 



Avant de parcourir les nouveautes du Html5, degageons quelques lignes de force de cette nouvelle version du langage 
Html. 

• Le Html5 est une evolution du Html. II en reprend les grands principes, quitte a en ameliorer certains aspects. II 
est congu pour assurer une retrocompatibilite avec ce qui a ete fait jusqu'a present, en termes de publication 
sur le Web. 

Meme si le codage est moins formaliste que le Xhtml5, I'exigence d'un code propre, respectueux des regies 
fondamentales du balisage continue d'etre d'actualite. 

• Le principe de la separation du contenu et de la presentation reste de mise et se voit meme renforce. 
L'abandon de toute une serie de balises et d'attributs de presentation (point F du present chapitre) en est la 
meilleure preuve. Les feuilles de style CSS sont des partenaires indissociables du Html5. Celui-ci espere 
qu'avec la montee en puissance des nouvelles feuilles de style CSS3, I'interface de I'utilisateur soit 
completement transformee dans les annees a venir. 

La simplification du code et le desir d'eviter toutes complications souvent inutiles sont deux principes suivis 
dans I'elaboration du Html5. On retrouve cette simplification et ce pragmatisme par exemple, dans un nouveau 
doctype simplifie et un code Html depouille de tout aspect de presentation. 

• Une chasse aux plugins qui viennent encombrer le code et compliquer la tache des concepteurs, par leur prise 
en charge directe dans le navigateur. Les nouvelles balises audio et video en sont une belle illustration. 

• La reconnaissance du JavaScript comme partenaire de la publication sur la toile. On pense ainsi aux scripts 
classiques pour verifier I'encodage obligatoire ou la validite d'une adresse de courrier electronique dans les 
formulaires. Le Html5 evitera ces encodages redondants par la prise en charge de fagon native par les 
navigateurs de ces fonctions. Autre exemple, le codage du dessin 2D et bientot 3D (balise <canvas>) est 
beaucoup plus proche du JavaScript que d'un langage de balise. 

• Le Html5 devient egalement une plate-forme d'interfaces d'applications (APIs) integrant des fonctionnalites 
complexes comme la geolocalisation, I'edition en ligne ou le glisser-deposer (drag/drop). 
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Les nouveautes du Html5 

Les nouveautes du Html5 et surtout du trinome du concept "Html5 + CSS3 + applications JavaScript" sont nombreuses. 
Htm 1 5 

• Un nouveau doctype simplifie et unifie. 

• La suppression des balises et attributs de presentation. 

• De nouvelles balises semantiques ou d'organisation. 

• De nouvelles balises audio et video qui ne necessitent plus I'appel a des plugins dedies. 

• Le dessin 2D et bientot 3D par la nouvelle balise <canvas>. 

• Une profusion de formulaires novateurs comme les curseurs ou les calendriers et la prise en charge de fagon 
native par les navigateurs de la validation des donnees. 

• Etc. 

L'objectif premier de cet ouvrage est bien entendu I'etude detaillee de I'heritage du Html 4.0 et des nouveautes du 
Html5. II faut noter que ce dernier est deja bien implante dans les navigateurs de la derniere generation. 
L'implantation actuelle du Html5 permet deja de le decouvrir et de I'utiliser. II faut cependant noter que I'integration du 
Html5 n'est pas encore complete. De nouveaux apports sont encore attendus, particulierement en ce qui concerne les 
formulaires. 

CSS3 

• De nouveaux selecteurs. 

• Les bords arrondis. 

• Les bordures imagees. 

• Les polices personnalisees permettant a la typographie de trouver enfin sa place dans les interfaces Web. 

• La presentation en plusieurs colonnes d'un texte. 

• Les ombres sur le texte comme sur les elements. 

• Les degrades de couleur. 

• Les arriere-plans multiples. 

• L'opacite ou la transparence. 

• Les transformations. 

• Les transitions (sans JavaScript). 

Ces nouvelles specifications CSS3 sont deja disponibles dans les versions recentes des navigateurs et en particulier 
dans les navigateurs de notre etude (voir la section "Les navigateurs de notre etude" dans le present chapitre). II ne 
fait aucun doute que les CSS3 vont revolutionner la fagon de concevoir et d'exploiter les interfaces Web dans les 
prochains mois ou les prochaines annees. 

Les applications JsAPI 
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• La geolocalisation qui permet de localiser (avec sa permission) I'util isateur par ses coordonnees de longitude et 
latitude. 

• Des super cookies avec Web Storage qui permettra un stockage plus important de donnees dans le navigateur. 

• L'utilisation des applications Web hors connexion apres la mise en cache des ressources necessaires. 

• Les Workers qui peuvent executer des taches de fond en parallele du programme JavaScript principal dans un 
environnement totalement separe de la page. 

• Les Websockets qui permettent d'etablir une communication bidirectionnelle asynchrone entre le navigateur et 
le serveur. 

• Le glisser-deposer {drag/drop) en natif dans le navigateur. 

• L'attribut ContentEditable qui permet I'edition en ligne du contenu d'un element. II fait apparaitre un editeur 
WYSIWYG basique qui permet done d'editer directement le contenu dans la page. Toutes les modifications 
apportees par I'utilisateur pourront etre traitees a la fin de I'edition. 

. Etc. 

Ces applications depassent largement le cadre de cet ouvrage dedie a I'apprentissage du Html5. Certaines sont deja 
implementees dans les navigateurs recents, d'autres non. Nous aborderons cependant brievement la geolocalisation 
dans un chapitre pour son cote spectaculaire et intrigant. 

Un certain nombre de ces fonctions sont deja reprises dans les cadriciels (framework) JavaScript comme Dojo et jQuery. 
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Le Html5 est un langage de balises 

Digne successeur des versions precedentes du Html et du Html 4.0 en particulier, le Html5 est toujours un langage de 
balises. 

1. Les balises 

Les balises, aussi appelees elements, sont des commandes a I'intention du navigateur et saisies entre des signes 
inferieur a (<) et superieur a (>). Ainsi une balise s'ecrit <baiise>. 

En regie generale, a toute balise d'ouverture correspond une balise de fermeture qui marque la fin de la commande 
annoncee par la balise d'ouverture. La balise de fermeture reprend le meme enonce que la balise d'ouverture mais ce 
dernier est precede d'une barre oblique (/). Ainsi a la balise d'ouverture <baiise> correspondrait la balise de 
fermeture </baiise>. La syntaxe d'une balise est alors : 

<balise> ... </balise> 

Pour comprendre le mode de fonctionnement des balises, je vous propose le texte suivant : 

II est <gras>important</gras> d'apprendre le langage <itaiique>Html5</itaiique> ! 
Ceci peut se comprendre de cette fagon : 

• ecrire "II est" de fagon normale puisque rien n'est specifie, 

• ensuite ecrire le mot (et uniquement ce mot) "important" et le mettre en gras, 

• rependre I'ecriture normale pour "d'apprendre le langage", 

• ecrire cette fois-ci en italique le mot "Html5" 

• et terminer par "!" en ecriture normale. 

Ce qui donne le resultat suivant : 

II est important d'apprendre le langage Html5 ! 

Le langage Html n'est ni plus ni moins que cela. Chaque fois que Ton donne une instruction au navigateur, par 
exemple mettre un titre, commencer un tableau ou faire un lien vers une autre page, une balise de debut est 
appliquee. La balise de fermeture signale au navigateur que la commande est terminee. 

Une exception cependant, Html5 a herite du Html des balises uniques, aussi appelees balises vides qui n'ont pas de 
balises de fermeture. 

Par exemple, la balise image <img>. 

Afin d'assurer une retrocompatibilite avec le Xhtml, ces balises peuvent egalement s'ecrire en Html5 avec un signe de 
fermeture. 

Ainsi, la balise image <img> peut egalement s'ecrire en Xhtml <img />. 

L'espace avant la barre oblique de fermeture est important pour des raisons de compatibilite avec les (tres) anciens 
navigateurs. 

Ce qui nous handicape un peu, nous les francophones, c'est le fait que ces balises font appel a des termes ou des 
abreviations de termes anglo-saxons qui les rendent (au premier abord) abstraites et done complexes. 

Exemples 



<b> 


b pour bold ce qui signifie gras 


<i> 


i pour italic ce qui signifie italique 


<P> 


p pour paragraph ce qui signifie paragraphe 
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<div> 


div pour division ce qui signifie ... division 


<table> 


table signifie tableau 


<f orm> 


form signifie formulaire 


<img /> 


img pour image 


Etc. 





2. Les attributs de la balise 

II est parfois necessaire de completer une commande par des specifications plus precises dans I'un ou I'autre 
domaine. Pour ce faire, le langage Html5 dispose des attributs de la balise. L'attribut s'insere dans la balise, entre le 
mot de commande et le signe > final. 

La syntaxe complete d'une balise avec un attribut est : <baiise attribut="vaieur"> ... </baiise> 

L'attribut comporte toujours une valeur, celle-ci s'indique en complement de l'attribut par un signe egal (=) suivi de la 
valeur mise entre des guillemets. II est imperatif de mettre cette valeur entre guillemets. Le strict respect de la 
syntaxe veut qu'il n'y ait pas d'espace avant et apres le signe egal. 

II est possible d'utiliser plusieurs attributs, separes par un espace, dans une meme balise : <baiise 
attributl="valeur " attribut2="valeur"> . . . </balise>. 
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Le bon usage des balises 



Voici quelques regies simples qu'il faudra respecter lors de I'ecriture des balises Html5. 

• En Html5, les balises ne sont pas sensibles a la casse. Ainsi, on peut ecrire indifferemment <balise>, <Baiise> 
ou <baiise>. Certains voyaient meme en I'utilisation des majuscules, un moyen efficace pour distinguer le code 
Html du contenu dans un document. Cependant, I'usage s'est generalise d'ecrire les balises en minuscules 
(comme en Xhtml). 

• La regie generale veut que toute balise ouverte <baiise> doit etre fermee </baiise>. Les libertes prises dans 
I'ecriture du Html 3.2 a cause du fonctionnent plus ou moins permissif des navigateurs ne sont plus d'actualite. 
La rigueur apportee par le Html 4.0 strict et le Xhtml 1.0 doit continuer a guider votre ecriture. 

• Les balises doivent etre correctement imbriquees. Lorsqu'on affecte plusieurs balises a un element, I'ordre de 
fermeture de celles-ci est essentiel. La premiere balise de fermeture doit correspondre a la derniere balise 
d'ouverture non fermee. Un exemple et tout sera beaucoup plus clair : 

Est correct : <a><b><c>contenu</c></b></a>. 

Est incorrect : <a><b><c>contenu</a></c></b>. 

• Les valeurs des attributs doivent toujours figurer entre des guillemets. Ici aussi, la rigueur dans le code reste 
de mise. 
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Les balises et attributs Html 4.0 disparus 



Les differences, tant au niveau des balises que des attributs, sont nombreuses et importantes par rapport au Html 4.0. 



1. Au niveau des balises 

Notons tout d'abord la disparition complete des cadres. Les balises <frame>, <frameset> et <noframes> ont 
definitivement disparu des outils a la disposition des auteurs. Ceci ne constitue pas reellement une surprise car ils 
etaient decries depuis de nombreuses annees. Les concepteurs professionnels les evitaient comme la peste depuis 
que Google avait annonce a I'attention des webmestres qu'il ne pouvait garantir la bonne indexation des sites 
comportant des cadres. La balise <iframe> quant a elle subsiste en Html5. 

Ensuite, la disparition de certaines balises de presentation comme <big>, <center>, <font>, <strike>, <tt> et <u>. Ici 
aussi, pas de grande surprise car le principe de la separation de contenu et de la presentation est a present bien 
etabli. Ces balises de presentation doivent maintenant etre prises en charge par des feuilles de style CSS. 

2. Au niveau des attributs 

Le Html5 va au bout du principe de la separation du contenu et de la presentation. Ce qui etonne, c'est I'ampleur des 
attributs concernes. En resume, ce sont tous les attributs relatifs a I'alignement, la largeur, les arriere-plans (de 
couleur ou avec image), les bordures et la numerotation des listes qui sont passes a la trappe. 

Tous ces attributs doivent etre pris en charge par les feuilles de style qui deviennent ainsi indissociables du code 
Html5. 

De fagon plus detaillee : 

• align dans les balises <caption>, <iframe>, <img>, <input>, <object>, <legend>, <table>, <hr>, <div>, <hx>, 
<p>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> et <tr>. 

• alink, link, text et vlink dans la balise <body>. 

• background dans la balise <body>. 

• bgcolor dans les balises <table>, <tr>, <td>, <th> et <body>. 

• border dans les balises <table> et <object>. 

• cellpadding et cellspacing dans la balise <table>. 

• frameborder dans la balise <iframe>. 

• height dans les balises <td> et <th>. 

• hspace et vspace dans les balises <img> et <object>. 

• marginheight et marginwidth dans la balise <iframe>. 

• noshade dans la balise <hr>. 

• nowrap dans les balises <td> et <th>. 

• rules dans la balise <tabie>. 

• size dans la balise <hr>. 

• type dans les balises <ii>, <oi> et <ui>. 
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• valign dans les balises <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> et <tr>. 



• width dans les balises <hr>, <table>, <td>, <th>, <col>, <colgroup> et <pre>. 

Ainsi, il n'est plus possible de fixer, en Html5, les bordures, I'alignement, les arriere-plans eventuels et la largeur des 
tableaux sans avoir recours aux feuilles de style CSS. 



Avec la disparition des attributs color ou bgcolor, le Html5 se decline en noir et blanc. 



Cette absence complete d'attributs de presentation nous a obliges de revoir notre structure d'apprentissage 
traditionnelle du Html avec d'un cote les balises Html et par ailleurs les feuilles de style CSS. Ainsi, des les premiers 
pas en Html, nous avons adjoint des notions elementaires de feuilles de style pour la presentation. Pour permettre a 
I'apprenant de s'exercer, par exemple, dans I'apprentissage des tableaux, des elements de feuilles de styles se 
revelaient indispensables pour au moins visualiser ceux-ci par une bordure. Une etude plus poussee et plus detaillee 
des proprietes CSS est abordee comme d'habitude a la suite de I'etude des balises et attributs du Html5. 
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Les navigateurs de notre etude 



Ces technologies de pointe que sont le Html5 et les feuilles de style CSS3 ne sont reprises que par les dernieres 
versions des navigateurs. 

En outre, I'integration du Html5 et des CSS3 n'est encore que partielle et varie d'un navigateur a I'autre. A ce stade, il 
est ainsi necessaire de retenir pour notre etude les principaux acteurs de ces techniques innovantes pour assurer une 
vue d'ensemble des apports importants qu'ils entrainent ou entraineront dans I 'edition et la publication des documents 
Web. 

Une integration complete du Html5 et des CSS3 par les navigateurs de pointe prendra encore quelques mois, voire 
quelques annees. Mais etant donne I'implication des firmes elles-memes dans I'elaboration du Html5, on peut presager 
que les evolutions seront rapides. 

II faudra egalement attendre un certain nombre d'annees avant que, par le systeme de renouvellement ou de mises a 
jour des navigateurs, le Html5 et les feuilles de styles CSS3 deviennent des applications grand public. 

II est interessant de noter I'importance donnee soudainement au JavaScript dans la conception des pages ou plutot 
des applications Web. Cette prise de position se concretise dans le fait que tous les navigateurs se sont dotes d'un 
nouveau moteur JavaScript. Que ce soit Opera 10.5 avec Carakan, Safari avec Nitro, Google Chrome avec V8 ou 
Internet Explorer 9 avec Chakra. On annonce meme deux moteurs JavaScript dans Firefox 4 avec SpiderMonkey et le 
tout nouveau Narcissus. 

Notons aussi I'apparition de I'acceleration materielle qui fait supporter par la carte graphique et non plus par le 
processeur, la restitution des animations et videos. 

Internet Explorer 9 

Internet Explorer 8 est arrive a bout de course et presente un retard consequent par rapport a la concurrence en 
raison de sa prise en charge quasi nulle des nouveaux standards Html5 et des feuilles de style CSS3. 

Internet Explorer 9, annonce courant 2011, se repositionne dans le groupe des navigateurs modernes en assimilant 
(enfin) du Html5 et une partie des specifications CSS3. 

Un probleme de taille subsiste toutefois puisqu'Internet Explorer 9 n'est prevu que sous Microsoft Vista et Seven. Done 
pas d'Internet Explorer 9 pour les utilisateurs de XP. Cet abandon de XP s'explique du cote de Microsoft par 
I'acceleration materielle d'Internet Explorer 9 qui reclame un systeme d'exploitation moderne. Pourtant, les specialistes 
retorquent que des navigateurs modernes comme Firefox, Chrome et Opera font bien de I'acceleration materielle sous 
XP. Cette prise de position est en tout cas regrettable pour les 50 % d'utilisateurs restes fideles a XP. Mais e'est peut- 
etre cette fidelite qui est reprochee... 

Quelques mots pour terminer sur le cauchemar des developpeurs Web. En effet, les statistiques indiquent que fin 
2010, encore 5 % des internautes utilisent le totalement obsolete Internet Explorer 6. 

Firefox 4 

Attendu debut 2011, Firefox 4 restera sans nul doute le navigateur prefere des concepteurs grace a son systeme 
d'extensions qui en font le partenaire incontournable dans le developpement d'applications Web. On pense 
specialement a Firebug et Web Developer qui sont des extensions devenues quasi indispensables pour de nombreux 
developpeurs. Les versions beta disponibles a ce jour font apparaitre de reelles avancees par rapport a son 
predecesseur Firefox 3.6 que ce soit par son interface renouvelee, une meilleure prise en charge des standards Html5, 
les CSS3, I'acceleration graphique, etc. 

Firefox 3.6, vieillissant par rapport a la concurrence et specialement celle de Google Chrome, ne sera pas totalement 
oublie pour autant. II faut garder a I'esprit qu'il reprenait deja de nombreux effets des CSS3 alors que d'autres 
navigateurs (lire Internet Explorer) les ignoraient completement. 

Google Chrome 7 

Apparu en septembre 2008, Google Chrome n'a cesse depuis d'accroitre ses parts de marche. On peut considerer qu'il 
est a I'heure actuelle le troisieme navigateur le plus utilise sur la toile. Depuis les versions se sont succedees a un 
rythme soutenu et toujours a la pointe de technologies comme le Html5 et la prise en charge progressive des feuilles 
de style CSS3. II faut souligner que les versions recentes sont rapidement adoptees par les utilisateurs. Ce qui 
confirme la modernite et le dynamisme de ce jeune navigateur. 

Safari 5 

Safari est depuis 2003, le navigateur par defaut des plateformes Mac OS X. Depuis sa version 4 (juin 2009), il est 
egalement disponible pour Windows. Cet excellent navigateur, rapide et innovant, a cependant quelques difficultes a 
etre adopte par les utilisateurs de Windows. Pourtant le navigateur Safari est a la pointe de la prise en charge du 
Html5 et des feuilles de style CSS3 et ne concede rien en performances a la concurrence. 

Opera 10.6 
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Ce navigateur sympathique mais plutot confidentiel nous sera tres utile pour notre etude du Html5 car il est le plus 
novateur en la matiere. II nous permettra par exemple, d'illustrer les nouveautes en matiere de formulaires du Html5 
qui ne sont pas encore reprises a ce jour par les navigateurs precites. 



- 2- 
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Le document Htm 1 5 minimum 



1. Le doctype et son importance 

Tout document Html doit commencer par un doctype. Le Html5 propose un doctype unique et simplifie. 

<! DOCTYPE html> 

Pour se rendre compte de la simplification, il suffit de le comparer avec un doctype du Html 4.0. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http: //www. w3 . org/TR/html4/loose .dtd"> 

Nettement plus court et enfin memorisable ! 

Le doctype, aussi appele DTD sert a indiquer au navigateur a quelles regies d'ecriture obeit le code source de la page 
Html ou Xhtml. II utilisera celles-ci pour afficher la page selon les standards du W3C. Tous les navigateurs appliquant 
la meme regie, vous etes ainsi assure d'un rendu identique entre les differents navigateurs. 

En I'absence d'un doctype, le navigateur ignore selon quelles regies il doit traiter la page. II se rabat ainsi sur des 
procedures qui lui sont propres pour afficher vaille que vaille votre page Html. Ce qui peut entrainer des differences de 
restitution sensibles entre les differents navigateurs. Ce mode bancal est appele mode compatibility ou quirks mode. 

Vous pouvez aisement verifier dans quel mode (quirks ou respect des standards) se trouve le navigateur. 

Dans Firefox 3.6+, accedez au menu Outils - Informations sur la page - onglet General - Mode de rendu. 



Pour Internet Explorer 8 + , encodez javascript : alert (document. compatMode) dans la barre d'adresse. Si une fenetre 
d'alerte indique cssicompat, il s'agit du mode standard. Si la fenetre d'alerte affiche Backcompat, il s'agit du mode 
quirks. 



£% Le doctype doit se situer a la premiere ligne du fichier Html. S'il y a n'importe quoi d'autre, meme un simple 
espace ou une ligne blanche, certains navigateurs considereront que la page n'a pas de doctype et 
afficheront celle-ci en quirks mode. 



2. La balise Html 

La balise <htmi> indique au navigateur qu'il s'agit d'un document Html. 

La balise <htmi> est I'element le plus haut ou I'element racine du document. Elle prend done place juste apres la 
declaration de doctype. 

<! DOCTYPE html> 
<html lang="fr"> 




</html> 
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La balise <Htmi> peut prendre comme attribut iang="fr" qui specifie que le document est en langue frangaise. Cette 
information est fort prisee par les moteurs de recherche comme Google ainsi que par les syntheses vocales utilisees 
par les personnes malvoyantes. 

A I'adresse www.w3schools.com/tags/ref_language_codes.asp, vous pouvez trouver une liste complete des autres 
langues referencees. 

3. L'en-tete du document 

La balise <head> ... </head> qui se positionne juste apres le doctype et la balise <htmi> contient ce qu'on appelle l'en- 
tete du document. 

Dans cet en-tete du document se situe toute une serie d'informations relatives au document lui-meme, 
independamment du contenu de celui-ci. 

Ces informations peuvent etre de natures tres diverses : 

• Le titre du document. Soit la balise <titie> ... <titie> reprise au point suivant. 

• Des declarations ou des appels de feuilles de style CSS. 

• Des fonctions ou des liens vers des fichiers JavaScript. 

• Des informations a I'intention des moteurs de recherche pour le referencement de la page. 

• Des informations a I'intention des navigateurs. 

• Des balises meta qui reprendront quant a elles I'encodage, la description de la page, les mots-cles associes a 
la page, le nom de I'auteur, des mentions de copyright, etc. 

Dans un souci de simplification, le Html5 specifie des valeurs par defaut pour I'attribut type des scripts, des styles et 
les elements link. Sauf si vous avez expressement besoin d'une valeur differente que celles definies par defaut, vous 
pouvez omettre en Html5 cet attribut de type. 

Le JavaScript est defini comme langage de script par defaut. 

Ainsi, en Html 4.0, on devait ecrire : 

<script type="text/ javascript"> 
</script> 

Et 

<script type="text/ javascript" src="f ichier . js"x/script> 
En Html5, on peut se contenter de : 

<script> 

</script> 

Et 

<script src="f ichier"></ script> 

Les CSS sont definis comme le langage de feuilles de style par defaut. 
Ainsi, en Html 4.0, on devait ecrire : 

<style type="text/css "> 
</style> 
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Et 

<link rel=" stylesheet " type="text/css" href="f ichier . css"> 

En Html5, on peut se contenter de : 

<style> 
</style> 

Et 

<link rel=" stylesheet " href=" f ichier . css"> 
Notre document minimal Html5 devient : 

<!DOCTYPE html> 
<html lang="fr"> 
<head> 

</head> 

</html> 



Mis a part le titre de la page (voir ci-apres), aucun element compris entre les balises <head> ... </head> 
n'apparait dans le navigateur. 



4. Le titre du document 



La balise <titie>, incluse dans I'en-tete du document, est la seule balise obligatoire de celui-ci. 
La balise <titie> ... </titie> donne un titre a votre page. 

Ce titre est affiche dans la barre de titre, situee en haut a gauche de tout navigateur et/ou dans les onglets ouverts 
par celui-ci. 



Tiire du document 1jE!§ 

Fidiier Edition Pr&entstion Histerique tavoriW 
1 ■< 1 » | [ + |e<ilg///&/ 6) (<V Google 




tjjj Trtre du document - Moiilla Ftnefox 4j0 

Fich c Edptiofi Affidhage HjjtonquE Ma rqut j ho^ 
j |_ Tire du document 

■ ^ j4 " (J |# ( j m:f/fUViert) 




La balise <titie> a une place importante dans I'algorithme de referencement de Google. On veillera a avoir pour les 
documents Web, un titre accrocheur et synthetique. II n'est pas inutile non plus d'y inclure un ou des mot(s)-cle(s) 
relatif(s) a la page. 

Le document Html5 se complete ainsi : 

<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
</head> 



</html> 
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Si par megarde il y avait une erreur dans les balises <titie> ... <titie>, une simple page blanche est 
affichee. 



5. L'encodage (charset) du document 

La notion du jeu de caracteres utilise (charset) est une notion essentielle dans le developpement de pages Web. 
Cette notion est pourtant parsemee d'embuches, surtout en termes d'interoperabilite. N'avez-vous Jamais regu 
d'emails ou certains caracteres etaient remplaces par d'autres signes cabalistiques comme des t ou vA©rification ? 

Le jeu de caracteres designe la fagon dont les caracteres d'un alphabet donne sont convertis en octets dans un fichier 
informatique (et vice-versa). Certaines methodes d'encodage sont specifiques a un environnement informatique dans 
une langue ou un alphabet donne, d'autres sont multiplateformes et multilingues. Exemple d'encodage : ASCII, 
windows-1252, ISO-8859-1, ISO-8859-15, UTF-8, etc. 



ASCII 


Jeu de caractere basique. II entramera une interoperabilite maximale 
mais il faudra encoder les caracteres accentues et speciaux par des 
entites du genre é (pour le e) ou € (pour l'€). 


windows-1252 


Jeu de caracteres utilise par Windows et de nombreuses applications 
Microsoft. C'est la porte ouverte a des problemes de compatibility sur 
d'autres systemes. 


ISO-8859-1 


L'ISO-8859-1 est le codage par defaut sur de nombreux protocoles 
reseau, ce qui est le gage d'une excellente interoperabilite. 


ISO-8859-15 


Version actualisee de l'ISO-8859-lqui comporte entre autres le signe €. 


UTF-8 


Application de I'Unicode qui est presente comme la solution de I'avenir. 
Son adoption est a I'heure actuelle freinee par sa prise en charge 
problematique dans certains langages de programmation (PHP). 



Les navigateurs possedent bien une fonction de detection automatique du jeu de caracteres. Mais l'encodage ainsi 
retenu de fagon arbitraire est parfois la porte ouverte a des erreurs d'interpretation. 

Des surprises peuvent ainsi apparaftre. Vous pouvez lire a ce sujet I'excellent article et la discussion qui s'en suit : 
"ISO-8859-1, ISO-8859-15, UTF-8, lequel choisir ?" a I'adresse http://forum.alsacreations.com/topic.php? 
fid=17&tid = 1201. 

II fait ainsi partie des bonnes pratiques de la publication sur le web de definir prioritairement l'encodage du document. 
Celui-ci se realise en Html5 par la balise : 

<meta charset = "iso-8859-l"> OU <meta charset = "UTF-8 "> 

L'ecriture suivante, rappelant le Xhtml 1.0, est egalement acceptee. 

<meta charset = "iso-8859-l" /> OU <meta charset="UTF-8 " /> 

Ainsi, il n'y a pas que le doctype qui est simplifie en Html5. Pour rappel, cette declaration d'encodage prenait en Html 
4.0 la forme : 

<meta http-equiv="Content-Type" content="text /html ; char set=iso-885 9-1 "> 

Notre document Html5 minimal est alors : 

<! DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

</html> 



ffk La specification Html5 du W3C, suivant en cela 1'IETF (Internet Engineering Task Force) qui edicte les 
standards Internet, recommande I'usage de l'utf-8. Rien n'empeche cependant de retenir le format iso-8859-1 
plus frequemment utilise en Europe occidentale. 
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6. Le corps du document 



Les balises <body> ... </body> determinent ce que Ton appelle le corps du document. C'est entre ces balises que 
prendra place le code Html5 qui sera utilise pour elaborer le contenu de la page. 

C'est cette partie du document Html qui sera affichee dans la fenetre du navigateur et done visible par I'internaute. 

En Html5, les attributs dedies a la presentation du corps du document de la balise <body> sont maintenant 
abandonnes pour laisser place a I'utilisation des feuilles de style. 

Ces attributs qui determinaient la couleur de I'arriere-plan (bgcolor), I'image d'arriere-plan (background) ou la couleur 
du texte (text) n'ont plus leur place en Html5. 

Au final, notre document Html5 minimal se presente ainsi : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

</body> 

</html> 
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La fa son de proceder 



Les langages utilises sur le Web ont cet avantage qu'ils ne reclament pas necessairement un logiciel dedie. Pour ecrire 
en code source, pas besoin de logiciel couteux ! Un simple editeur de texte, present dans tous les systemes 
d'exploitation, fait parfaitement I'affaire. 

L'important est d'avoir du texte brut sans aucune mise en forme. 

Sous Windows, vous pouvez utiliser le Bloc-notes ou Notepad. Pour rappel, on y accede par Tous les programmes - 
Accessoires - Bloc-notes. 



_| Sans titre - Bloc-notes 


1=1 


a ll-a-l 


Fichier Edition Format Affichage 


? 





Cet editeur de texte aux fonctions rudimentaires est cependant "parfait" pour encoder du texte brut (sans aucun 
formatage). 

II est important de respecter une procedure d'enregistrement correcte. Apres avoir fait Fichier - Enregistrer sous..., 
veillez a activer dans la zone Type I'option Tous les fichiers. 



Nam du fichier : exempl fchtm 



Type; Tous Itjfichitrj 



Cach et" les dossi ers 



Encodage : ANSI 



Enregistrer 







3 



Annular 



Dans le cadre de cet ouvrage consacre au Html5, les fichiers auront comme extension *.htm ou *.html. L'usage de 
I'extension *.htm semble se generalises 

Pour afficher votre fichier, il suffit d'ouvrir votre navigateur et d'indiquer le chemin vers le fichier concerne. 

Cette operation semble toute simple. Cependant, avec la tendance d'une interface de plus en plus simplifiee des 
navigateurs, elle n'est pas toujours intuitive. Pour Firefox, Safari et Opera, il faut dans un premier temps activer la 
barre des menus, puis retrouver le fichier par Fichier - Ouvrir un fichier. Pour Internet Explorer 9 et Google Chrome 
dont I'interface est encore plus depouillee, il n'y pas d'autre alternative que le raccourci clavier [Ctrl] O. 

ffk En cas de modifications apportees au code source initial, n'oubliez pas de reactualiser la page pour que le 
navigateur tienne compte de celles-ci. 



Exemole 

A ce stade, tous les outils sont reunis pour realiser notre premier document Html5. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

Un premier document Html 5 

</body> 

</html> 



Ce qui s'affiche dans Firefox 4.0 
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^ Htm 15 - Mozilla Firefox4.0 \-nn || S ||n£3-| 


Fichier Edition Affichage Historique Marque- pages 




j Q Htm 15 




1 + 1 ~ " 




D fil-ft- D'Se.p 





Un premier document Html5 
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La validation du code Html5 



Bien que le Html5 soit moins formaliste que le Html 4.0 strict ou le Xhtml 1.0, il reste utile voire indispensable de valider 
le code source. 

Les avantages d'un code parfait et done de la validation sont : 

• Une verification en profondeur du Html5 pour les codeurs debutants (et confirmes). 

• L'assurance que votre page sera toujours correctement affichee par la plupart des navigateurs. Une page 
invalide peut amener les navigateurs a interpreter celle-ci de maniere tres differente. 

• La demonstration de vos capacites professionnelles en fournissant un code de qualite, conforme au standard 
du html5. 

• Les syntheses vocales et autres aides techniques a I'attention des personnes moins valides se basent sur un 
code valide pour restituer les pages de la toile. 

Si le document soumis au validateur n'est pas correct, celui-ci vous fournira une analyse des problemes qui vous 
permettra de corriger votre code. Les premieres validations peuvent etre tres frustrantes mais constituent un excellent 
apprentissage du code source. Le rapport d'erreur est cependant souvent tres technique. 

£% Pour effectuer leur fonction de verification et de validation, les validateurs ont besoin du doctype du document 
(voir section Le document Html5 minimum - L'encodage (charset) du document du present chapitre). 

Les validateurs Html 5 (en ligne) disponibles sont : 

• Le validateur du W3C lui-meme. 

• Le validateur du W3Quebec. 

• Le validateur validator. nu. 

Le validateur du W3C 

Le W3C lui-meme presente un validateur de code (validator.w3c.org). Ce qui ne peut etre qu'un gage de qualite. 
La validation du Html5 est cependant encore annoncee comme etant au stade experimental. 



Markup Validation Service 

Check the markup (HTML, XHTML. ...) nf Web documents 



Notons : 

• Qu'il est en anglais. 

• Qu'il offre de valider un fichier par son adresse http, un fichier present sur votre ordinateur ou du code insere 
dans une zone de texte. 

• Qu'il est tres pointilleux. 

• Que ses remarques et explications sont tres techniques voire parfois sibyllines. 

• Qu'il est "la" reference des professionnels. 

Le validateur du W3Quebec 
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Le W3Quebec est un organisme sans but lucratif visant a promouvoir I'ensemble des normes, standards ouverts et 
bonnes pratiques du Web et du multimedia. 



W3)Quebec 

*r Beta 



II propose un validateur : 

• En frangais. 

• Avec la possibility de valider un fichier par son adresse http, un fichier present sur votre ordinateur ou du code 
insere dans une zone de texte. 

• Les avertissements ou erreurs sont fournis en frangais dans un langage technique mais accessible. 

• II manque parfois des explications plus explicites pour corriger le code soumis. 

• II s'agit en fait d'une traduction en frangais du validateur du W3C. 

II faut noter que le validateur du W3Quebec (www.w3qc.org/validateur/) etait en reconstruction lors de la conception 
de cet ouvrage. 

Le validateur validator.nu 

Le site validator.nu propose egalement au stade experimental un validateur Html5 (html5. validator.nu/). 
Signalons qu'il fut le premier a proposer un validateur Html5. 
On peut souligner : 

• Qu'il est en anglais. 

• Que son interface est tres simplifiee. 

• Qu'il offre de valider un fichier par son adresse http, un fichier present sur votre ordinateur ou du code insere 
dans une zone de texte. 

• Qu'il semble d'excellente qualite. 

Pour les amateurs d'extensions Firefox, le module Html5 Validator vous permet, apres installation, de valider votre page 
via le menu contextuel par le validator.nu. 

Test 

Nous n'avons pas resiste a la tentation de realiser un test a partir d'un code html5 errone. 
Le code errone est : 



1 . 


<!DOCTYPE html> 


2. 


<html lang="fr"> 


3. 


<head> 


4 . 


<title>Html5</title> 


5 . 


<meta charset="iso-8859- 


6. 


</head> 


7 . 


<body> 


8. 


<p align="center "> 


9. 


<s>Html5</s> 


10 


</p> 


11 


<table width="200px"> 


12 


<tr> 


13 


<td>K/td><td>2</td> 


14 


</tr> 
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15. <tr> 

16. <td>3</tdxtd>4</td> 

17. </tr> 

18. </table> 

19. </body> 

20. </html> 



Les erreurs sont : 

• A la ligne 8, I'usage de I'attribut align qui est supprime (obsolete) en Html5. 

• A la ligne 9, I'usage de la balise de soulignement <s> qui n'existe plus en Html5. 

• A la ligne 11, I'usage de I'attribut width de la balise <tabie> est supprime en Html5. 
Le validateur du W3C detecte sans difficultes ces erreurs. 



£21 Line 8, Column 18: 

<p align="center"> 


The align attribute on the p element is obsolete. 
Use CSS instead. 


§£| Line 9, Column 3: 

<s>Html5</s> 


The s element is obsolete. Use CSS instead. 




Q[ Line 11, Column 21:<table width="200px"> 


The width attribute on the table is obsolete. Use 
CSS instead. 



L'affichage de ce code errone nous fournit une belle justification de I'utilite d'une validation du code. En effet, tous les 
navigateurs de notre etude affichent le terme Html5 barre alors qu'un soulignement etait prevu par la balise <s>. 



B \\y£3r*\ 
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Preambule 



L'apprentissage de la publication sur le Web s'effectuait traditionnellement en distinguant le Html des feuilles de style 
CSS. Avec la disparition en Html5 de tous les attributs de presentation, il devient difficile, voire impossible, d'illustrer le 
code et les balises du Html. De fagon logique, il apparait necessaire d'introduire quelques elements de feuilles de style 
pour repondre a des contraintes de presentation afin de pouvoir illustrer les explications et les exemples. 

Ce chapitre presente les elements basiques des feuilles de style qui seront utilises dans la partie consacree au Html5. 
Les CSS seront bien entendu etudiees de fagon detaillee dans la partie qui leur est consacree. 

L'important, a ce stade de notre etude, est simplement de comprendre les fonctions respectives du Html dedie a la 
structuration du contenu et des feuilles de style affectees a la presentation de celui-ci. 
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Les proprietes de style 



Les feuilles de style prennent en charge tout ce qui concerne la presentation du document Html comme la couleur, 
I'alignement, les bordures, la taille, les arriere-plans ou I'interligne. 

La declaration d'un style s'effectue par le binome propriete: vaieur;. 
Exemole 

text-align: center; 

Ce qui peut se lire : "aligner le texte de fagon centree". 
Detaillons cette notation : 

• propriete indique I'element de presentation qui est concerne ; par exemple color pour la couleur, text-align 
pour I'alignement, border pour les bordures, font-size pour la taille des caracteres. 

• la propriete est separee de sa vaieur par un double-point. 

• vaieur specifie par un mot-cle un pourcentage ou une grandeur en fonction de la propriete a laquelle el le est 
assignee. 

• le point-virgule final qui indique la fin de la declaration de style est obligatoire. 

• les espaces sont permis. Ainsi, certains auteurs ont pris I'habitude de mettre un espace entre le double-point 
et la vaieur pour la lisibilite du code. 
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Les selecteurs 



II faut ensuite determiner quels elements du code Html seront concernes par cet effet de presentation. Ces elements 
sont appeles les selecteurs. 

Selecteur de base 

Le premier selecteur qui vient a I'esprit est la balise Html. Ainsi, on peut par exemple "accrocher" la declaration de style 
precedente (aligner le texte de fagon centree) a la balise <hi>. La syntaxe devient : selecteur { propriete: vaieur; } 

Exemple 

hi { text-align: center;} 

Commentaires 

• On reprend simplement la denomination de la balise sans les signes inferieur (<) et superieur (>). Done 
uniquement le texte de la balise. 

• La declaration de style est comprise entre des accolades. 

• II ne faut pas oublier I'accolade fermante sinon le navigateur ne prend pas en compte la declaration de style. 
De cette fagon, toutes les balises <hi> seront alignees de fagon centree. 

Selecteurs de classe 

Dans certaines situations, on ne souhaite pas apporter un effet de presentation a toutes les balises d'un type donne 
mais a certaines balises librement choisies. Les feuilles de style ont alors introduit la notion de classes (class) 
permettant au concepteur de definir ses propres selecteurs. D'ou le nom de selecteur universel. 

La balise a laquelle on desire appliquer la declaration de style sera distinguee des autres par I'attribut 

class = "nom_classe" SOit, par exemple, <hl class = "ef fetl"> ... </hl>. 

La Syntaxe est alors : .nom_classe { propriete: vaieur;} 

Soit le nom donne a la classe, precede d'un point et suivi de la declaration de style. 
Exemple 

.effetl { text-align: center;} 

Ici seule la balise <hi> avec I'attribut ciass="effeti" sera centree. En outre, cet effet de presentation pourra etre 
applique a d'autres balises du code comme un paragraphe ou une image. 

Selecteur d'identifiant 

Son concept est proche des selecteurs de classe mais ici, on ne souhaite appliquer I'effet de style qu'a un seul et 
unique element de la page. Cet element etant unique, il pourra etre traite comme un objet qui sera eventuellement 
manipule par du JavaScript. 

Cet element unique est identifie par I'attribut id="nom_identifiant" soit, par exemple, <h2 id="titre2"> ... </h2>. 

La Syntaxe est dans Ce Cas : tidentifiant { propriete: vaieur;} 

Exemple 

#titre2 { text-align: center;} 

Soit le nom donne a I'identifiant, precede du signe diese (#) et suivi de la declaration de style. 
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L'incorporation du style 



II existe de multiples fagons d'incorporer des declarations de style dans une page Html. A ce stade de notre etude des 
CSS, nous en retiendrons les plus elementaires. 

Style en ligne 

La declaration de style est ajoutee directement a une balise donnee dans le code Html par I'attribut style. 
Exemple 

<hl style="text-align : center; "> ... </hl> 

Cette fagon basique ne respecte pas la regie de la separation du contenu de la presentation. Son usage doit done 
rester exceptionnel. 

Style interne 

Les differentes declarations de style sont regroupees dans I'en-tete du document soit entre les balises <head> ... 
</head>. La syntaxe se presente ainsi : 

<style type=" "text/ess "> 
Declarations de style 
</style> 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type=" "text/css"> 

hi { color : red; } 

. effetl { padding-left: 20px; 

font-style: italic;} 

</style> 
<body> 

<hl>Titre 1 en rouge</hl> 

<h2 class="ef f et 1 " >Sous-t itre en italique</h2> 

<hl>Titre 2 en rouge</hl> 

</body> 

</html> 



, , Htm 15 



Fichier Edition Pre:entation Historique Favoris Fenetre 



f*> file:///C:/Users/V: C Or Google » 



Titre 1 en rouge 

Sous-titre en italique 



Titre 2 en rouge 



<CSV 
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Le texte simple 

Tout le contenu de votre page Web se place dans le corps du document Html5, soit entre les balises <body> ... </body>. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

Un texte en Html5 

</body> 

</html> 
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Un texte. en Html5 



Terrnine 



On notera qu'en Html, les espaces multiples sont ignores. Seul un espace est retenu par le navigateur. 
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Le controle de passage a la ligne 

En Html, les retours chariot, ou passages a la ligne dans le code, sont ignores et assimiles a un espace. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

Html5 succede au 
Html 4 . 
</body> 
</html> 
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Html5 succede an Html 4.0 



Terrnine ^jf 



On remarque que le Html affiche tout sur une seule ligne. 
Pour forcer le passage a la ligne, il faut utiliser la balise <br>. 
Notre exemple devient : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

Html 5 succede au<br> 

Html 4 . 

</body> 

</html> 
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Html5 succede an 
HtaI4.0 



Termine 



Commentaires 



La balise <br> est une balise dite unique car el le ne comporte pas de balise de fermeture. 



La notation <br />, issue du Xhtml 1.0, est egalement acceptee en Html5. 
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La mise en gras 



Le W3C prone la stricte separation du contenu et de la presentation. Le Html se chargeant de la seule structure du 
document et les feuilles de style CSS de tout I'aspect de mise en forme visuelle. II peut ainsi sembler paradoxal de 
retrouver des balises de presentation ! Rassurez-vous, il ne s'agit que de quelques formatages de texte des plus 
basiques comme mettre du texte en gras, en italique, en exposant ou en indice, etc. L 'etude detaillee des feuilles de 
style CSS permettra de plus grandes fantaisies de presentation. 

Pour mettre du texte en gras (bold en anglais), il suffit d'inclure celui-ci entre les balises <b> ... </b>. 
Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<b>Du texte en gras</b> 

</body> 

</html> 
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Dans le meme ordre d'idee, la balise <strong> ... </strong> permet egalement de mettre en gras dans les navigateurs 
visuels. 

La difference entre les balises <b> et <strong> est pourtant sensible en Html. La balise <b> induit un effet purement 
typographique et visuel. La balise <strong> a pour but de mettre en avant, de renforcer le texte. Si les navigateurs 
visuels ont adopte la meme forme de mise en gras, ('interpretation en est fort differente dans les syntheses vocales qui 
lisent les pages Web a I'intention des personnes visuellement deficientes. La balise <strong> renforcera le contenu par 
une intonation de voix differente ou un niveau sonore plus eleve. Le sens donne au texte par la balise <strong> est 
ainsi fort different. 
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La mise en italique 

Pour mettre le texte en italique (italic), il faut I'inclure entre les balises <i> ... </i>. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<i>Du texte en italique</i> 

</body> 

</html> 
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Terrnine 




Commentaires 

• II est possible de mettre du texte en gras et en italique par le cumul des balises <b> et <i>. II importe 
cependant que ces balises soient alors correctement imbriquees. Ce qui signifie que I'ordre de fermeture des 
balises soit I'inverse de I'ordre d'ouverture de celles-ci. Ainsi, <b><i>texte</i></b> sont correctement 
imbriquees. Par contre, avec <b><i>texte</b></i>, les balises se chevauchent et I'ordre d'imbrication n'est pas 
respecte. 

• II existe aussi la balise <em> (emphase). Celle-ci met egalement le texte en italique dans les navigateurs visuels. 
II faut en trouver la difference avec la balise <i>, dans le sens donne a ces deux balises. La balise <i> est 
purement typographique et visuelle. La balise <em> a pour but de mettre en avant, de mettre en exergue le 
texte qu'elle contient. Ce qui peut etre rendu d'une autre fagon dans les navigateurs non visuels. 
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La mise en exposant et en indice 



II est parfois necessaire de mettre des caracteres en exposant ou en indice dans, par exemple, des formules 
mathematiques ou chimiques. 

La balise <sup> ... </sup> mettra le contenu en exposant et la balise <sub> ... </sub> en indice. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

(a + b) <sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup><br> 
H<sub>2</sub>0 
</body> 
</html> 
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(a + b) 2 = a 2 + 2ab + b 2 
H 2 



Termine 
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Les autres balises de texte 



II y a d'autres balises de texte dont I'emploi est moins frequent sinon rare. 



1. Le texte bar re 

La balise <dei> ... </dei> permet de marquer un element de texte comme supprime (delete) ou perime, par exemple 
lors d'une mise a jour de prix dans un site commercial. Le texte apparalt alors barre a I'ecran. 

Exemple 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




</head> 




<body> 




La balise <del>Html 4.0</del> Html 5 


...<br> 


Cle USB au prix de <del>29 . 99</del> 


24.99 € 


</body> 




</html> 





® 
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La balise Html I.O HtmlS ... 
Cle USB au prix de 19^9- 24.99 € 



Termine 



Commentaire 

La balise <strike> du Html 4.0, qui permettait de barrer du texte, n'a pas ete reprise dans le Html5. La balise <dei>, 
qui presente le texte comme barre, peut etre une alternative. 



2. Le texte pre-formate 

La balise <pre> . . .</pre> permet d'afficher le texte tel qu'il a ete encode dans I'editeur de texte. Les espaces, les 
tabulations et les retours chariot sont respectes a I'ecran. Si elle comporte du texte, celui-ci sera affiche avec une 
police a pas fixe. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<pre> 
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Le texte inclus dans une balise pre 

est affiche dans une police a pas fixe 

et preserve les espaces 

Ainsi que les passages a la ligne. 

<pre> 

</body> 

</html> 
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Le texte inclus dans une balise pre 
est affiche dans vine police a pas fixe 
et preserve les espaces 

Ainsi que les passages a la ligne. 



Terrnine 



3. La direction du texte 

Certains systemes d'ecriture, tels que I'alphabet arabe et hebreu, s'ecrivent de droite a gauche au contraire du sens 
d'ecriture conventionnel de gauche a droite des langues utilisant I'alphabet latin (telles que le frangais). Le Html, 
langage universel, se devait de tenir compte de cette fagon de specificite. 

La balise <bdo> ... </bdo> indique le sens d'affichage du texte (de la gauche vers la droite ou de la droite vers la 
gauche). 

Les attributs sont : 

• dir="itr" (left to right) pour le sens de lecture de la gauche vers la droite (defaut). 

• dir="rti" (right to left) pour le sens de la droite vers la gauche. 



Exemple 



<!DOCTYPE html> 










<html lang="fr"> 










<head> 










<title>Html5</title> 










<meta charset="iso-8859-l"> 










</head> 










<body> 










<bdo dir=" ltr " >engage le jeu 


que 


je 


le 


gagne</bdo><br> 


<bdo dir=" rt 1 " >engage le jeu 


que 


je 


le 


gagne</bdo> 


</body> 










</html> 











- 2- 
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Les commentaires 



II est parfois utile de commenter le code Html (comme pour tout code de programmation d'ailleurs), pour en faciliter la 
comprehension lors d'une mise a jour. 

En Html5, tout comme en Html 4.0, les commentaires doivent etre precedes de la balise <! — et etre fermes par la 
balise — >. 

Tout ce qui sera ecrit entre ces balises ne sera pas affiche a I'ecran par le navigateur. Notons cependant que ces 
commentaires restent visibles lorsqu'on consulte le code source de la page. 

Ajoutons que les commentaires peuvent occuper plusieurs lignes et peuvent prendre place indifferemment dans le 

<head> ... </head> OU dans le <body> ... </body>. 



Exemple 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l 


"> 


</head> 




<body> 




<b><i>Texte en gras et en 


italique</ix/b> 


<! — commentaire particul 


ier — > 


</body> 




</html> 
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Les caracteres speciaux 



II existe une foule de caracteres speciaux qu'il faut parfois encoder de facon particuliere. 

On pense dans un premier temps aux caracteres qui sont utilises par le code Html5. Par exemple, le signe inferieur a 
(<) qui marque I'ouverture d'une balise. A la lecture du code, le navigateur risque alors d'etre mis en difficulte. Le 
validateur du W3C signale par ailleurs cette ambigui'te lors de la verification de votre page. 

Un peu comme pour les mots reserves dans un langage de programmation, il y a une liste d'elements a eviter dans le 
codage du texte. Ces elements par exemple : 

• Le signe < qui marque le debut d'une balise. 

• Le signe > qui marque la fin d'une balise. 

• Le signe " utilise dans les attributs de balise. 

• Le signe & qui marque le debut d'une reference de caractere. 

Ces differents signes doivent etre encodes en utilisant les entites suivantes : 



< 


sit; 


> 


> 


II 


Squot ; 


& 


&amp ; 



Remarquez bien le point-virgule final obligatoire. 

Par ailleurs, il y a ensuite une serie de caracteres qui n'existent pas sur le clavier normal comme le © du copyright ou le 
® de la marque deposee. D'autres caracteres sont specifiques aux mathematiques comme le signe _T pour les 
integrales. Pour les personnes interessees, une longue liste de caracteres speciaux utilises en Html est disponible a 
I'adresse http://alexandre.alapetite.fr/doc-alex/alx_special.html. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

La balise <b> ... </b> met le texte en gras.<br> 
Sspades; ♣ shearts; Sdiams; 

</body> 
</html> 
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La balise <b> . . . </b> met le teste en gras. 



Termine 

, 

Qu'en est-il des autres caracteres speciaux qui foisonnaient en Html ? Qu'en est-il en Html5 des seacute; (pour le e), 
des sgrave; (e), des ˆ (e), des sagrave; (a), des   (espace insecable), etc. ? 

En principe, si le caractere existe dans le jeu de caracteres (charset) declare dans le document Html5, il n'est pas 
necessaire d'ecrire les caracteres speciaux au moyen des entites. 

Ainsi, dans les encodages iso-8859-1 et iso-8859-15, le e existe et il n'est done pas necessaire d'avoir recours a 
I'entite seacute; . Ce qui ne peut qu'ameliorer la lisibilite du code. 

Par contre, avec I'encodage iso-8859-1, le signe € n'existe pas car trop ancien pour supporter ce caractere dans son 
jeu. II faut alors, obligatoirement, passer par son entite seuro; . 

Pour en savoir plus a ce sujet, vous pouvez consulter les prescriptions du W3C a I'adresse www. la- 
grange. net/w3c/htm 14.0 1/charset. htm I. 

II existe bien une detection automatique de I'encodage dans les navigateurs mais celle-ci peut dans certaines 
circonstances, reserver de mauvaises surprises. II est recommande de bien specifier le charset. 



- 2- 



© ENI Editions - All rights reserved - Algeria Educ 



Les balises Html 4.0 supprimees 

Pour rappel, le Html5 va jusqu'au bout du principe de la separation du contenu et de la presentation en supprimant 
toute une serie de balises et d'attributs ayant trait avec la presentation. 

Ainsi, les balises suivantes du Html 4.0 ont disparu dans la specification Html5 : 

• Les balises <big> et <smaii> qui permettaient d'afficher un texte de fagon plus grande ou plus petite. 

• La balise <font> pour la police de caracteres ainsi que ses attributs size, color et face qui determinaient 
respectivement la tail le, la couleur et le type de celle-ci. 

• La balise <s> qui permettait de souligner du texte. 

• La balise <strike> qui permettait de barrer du texte. 

• La balise <tt> qui permettait d'afficher du texte dans une police a espacement fixe. 
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Le formatage du texte avec les feuilles de style 



Comme explique au chapitre "Premiers elements de feuilles de style", nous introduisons ci-apres quelques elements de 
feuilles de style afin de rendre vos premiers essais en Html5 plus agreables. En effet, le Html5 qui se preoccupe 
exclusivement de la structure du document, est pour le moins depouille. 

L'important a ce stade est de comprendre le mecanisme des feuilles de style pour realiser des elements basiques de 
presentation. Leur etude detaillee sera abordee dans la partie 2 consacree aux CSS. 



1. Gras 

II est possible de mettre en gras avec les feuilles de style CSS sans passer par la balise <b>. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
span { font -weight : bold; } 

</style> 

</head> 

<body> 

Texte en <span class="gras">gras</span> 

</body> 

</html> 
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Texte en gras 




Termine 











La propriete de style font-weight (textuellement, le poids ou I'importance de la police) est mise sur bold (soit en 
gras). Cette propriete CSS concerne les balises <span>. La propriete complete span { font-weight: bold;} mettra 
toutes les balises <span> du document en gras. 



2. Italique 

II est possible de mettre en italique avec les feuilles de style CSS sans passer par la balise <i>. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
.italique { font-style : italic;} 

</style> 

</head> 

<body> 

Texte en <span class="italique">italique</span> 
</body> 
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</html> 
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Texte en italique 


Termine 







Ici, la propriete de style font-style (le style de la police) est mise sur italic (en italique). Cette propriete CSS 
concerne les balises avec un attribut de classe que nous avons nomme ciass="itaiique". La propriete 

complete .italique { font-style : italic;} mettra tOUteS les balises dotees de I'attribut class = "italique" du 

document en italique. 



3. La taille des caracteres 

Avec la suppression de la balise <font> et de son attribut size, la taille des caracteres est uniquement definie par la 
propriete de style CSS font-size. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
#grand { font-size: 36px; ) 

</style> 

</head> 

<body> 

<div id="grand">Texte en grand</div> 

</body> 

</html> 
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Texte en £ 


jrand 






Termine 


# , 





La taille des caracteres (font-size) est fixee a 36 pixels (36px). El le ne s'appliquera qu'a la seule balise <div> 
identified par id="grand". 



4. La couleur des caracteres 
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Avec la suppression de I'attribut color de la balise <font>, la couleur des caracteres se definit par la propriete de 
style CSS color. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l" 

<style type="text/css"> 

hi (color : red; } 

</style> 

</head> 

<body> 

<hl>Titre en rouge</hl> 

</body> 

</html> 
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Titre en rouge 



Les balises <hi> auront leur texte dans la couleur (color) rouge (red). 



5. L'alignement 



L'alignement du texte se realise par la propriete de style CSS text-align. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
Icentre { text-align: center; } 

</style> 

</head> 

<body> 

<div id=" centre " >Texte aligne au centre</div> 

</body> 

</html> 
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Texte aligne an centre 



Termine 



La propriete text-align indique que I'alignement du texte est centre (center) 



6. Le soulignement 

Sur la toile, le soulignement est la convention adoptee pour signaler un lien. Tout autre soulignement de texte ne 
peut ainsi qu'induire votre visiteur en erreur. Ainsi, il doit etre evite, sinon proscrit, lors de I'ecriture du code Html. 

La suppression de la balise de soulignement de texte <s> en est Illustration. 

II est neanmoins possible de souligner un texte par une propriete de style. 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




<style type="text/css"> 




.souligne { text-decoration 


underline; } 


</style> 




</head> 




<body> 




Texte <span class="souligne' 


>souligne</ span> 


</body> 




</html> 







Htm 15 - Mozilla Firefox 
hier Edition Affichage Historii 



Htm 15 



Texte souligne 



Termine 



La propriete de style indique que la decoration du texte (text-decoration) est le souligne (underline). 
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Les titres 



Quoi de plus utile que de prevoir differentes tallies de titres pour structurer un contenu ? II suffit de penser aux titres 
qui identifient une grande section de texte ou a une table des matieres. 

Le langage Html5 propose six grandeurs de caracteres pour les titres. Quand on sait que titre se dit en anglais 
heading, I'elaboration de la balise de titre devient evidente ; <h> pour heading suivi du numero 1 (pour le plus grand), 2, 
3, 4, 5, 6 (pour le plus petit) et le > de fermeture. Par la suite, la notation <hx> ... </hx> sera utilisee ou x est un niveau 
de 1 a 6. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<hl>Titre de niveau K/hl> 
<h2>Titre de niveau 2</h2> 
<h3>Titre de niveau 3</h3> 
<h4>Titre de niveau 4</h4> 
<h5>Titre de niveau 5</h5> 
<h6>Titre de niveau 6</h6> 
</body> 
</html> 
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Titre de niveau 1 



Titre de niveau 2 



Titre de niveau 3 



litre de niveau 4 



Titre de niveau 5 



Titre de nireau 5 



Commentaires 

Malgre la simplicite de cette balise, plusieurs remarques s'imposent : 

• Cette balise datant du tout debut du Html est parfaitement compatible avec tous les navigateurs. 

• Par defaut, avec la balise <hx> ... </hx>, le texte est mis en gras. 



• Par defaut egalement, comme pour tous les elements de bloc aussi appeles les elements de division (voir point 
F du present chapitre), la balise ajoute une ligne vide entre le contenu de la balise et la suite du document. 
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• Pour obtenir des caracteres plus grands ou plus petits que ceux proposes par defaut ou une autre police que 
la police par defaut du navigateur, il faut passer par une feuille de style CSS. 

• Les balises de titre en debut de page sont fortement prisees par les moteurs de recherche comme Google et 
influenceront de fagon pertinente le referencement et le classement du site, particulierement lorsqu'elles 
contiennent des mots-cles pertinents. 

• Le W3C insiste pour qu'en Html5, les balises de titre <hx> retrouvent toutes leurs qualites de structuration des 
pages Web. L'usage des balises de titres doit done etre reserve a leur fonction originelle. II importe de ne pas 
les detourner de leur but premier pour, par exemple, mettre du texte en gras ou avec une taille de caracteres 
determinee. Les feuilles de style CSS sont la pour realiser ces presentations. 

• L'attribut align, disponible dans le Html 4.0, n'est pas repris dans le Html 5. L'alignement du paragraphe se 
realise ainsi par une propriete de style CSS. 



Exemple 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




<style> 




fcentre { text-align: center; } 




#droite { text-align: right; ) 




</style> 




</head> 




<body> 




<h3>Titre de niveau 3</h3> 




<h3 id="centre">Titre de niveau 


3</h3> 


<h3 id="droite">Titre de niveau 


3</h3> 


</body> 




</html> 






1=1 
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Titre de niveau 3 



Titre de niveau 3 



Titre de niveau 3 
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Les paragraphes 



Un contenu textuel gagne en lisibilite et comprehension lorsqu'il est divise en differents paragraphes. 
Pour definir un paragraphe, la balise <p> ... </p> est utilisee. 

Exemple 



<!DOCTYPE html> 






<html lang="fr"> 






<head> 






<title>Html5</title> 






<meta charset="iso-8859-l"> 






</head> 






<body> 






<p>Lorem ipsum dolor sit amet, 


consectetuer adipiscing elit. 


Sed 


non risus. Suspendisse lectus 


tortor, dignissim sit amet, 




adipiscing nec, ultricies sed, 


dolor . </p> 




<p>Lorem ipsum dolor sit amet. 


consectetuer adipiscing elit. 


Sed 


non risus. Suspendisse lectus 


tortor, dignissim sit amet, 




adipiscing nec, ultricies sed, 


dolor . </p> 




</body> 






</html> 
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Lorem ipsum dolor sit amet consectetuer adipiscing eKt. 
Sed non risus. Suspendisse lectus tortor, dignissim sit 
amet adipiscing nec, ultricies sed, dolor. 

Lorem ipsum dolor sit amet consectetuer adipiscing elit. 
Sed non risus. Suspendisse lectus tortor, dignissim sit 
amet, adipiscing nec, ultricies sed, dolor. 



J 



Commentaires 

• Cette balise est parfaitement compatible avec les navigateurs anciens et modernes. 

• Par defaut, chaque paragraphe est precede et suivi d'un espace correspondant a un saut de ligne pour 
marquer la separation avec le contenu precedent et suivant. Cet espace peut etre modifie par les feuilles de 
style. 



L'attribut align du Html 4.0 a disparu dans la specification Html5. L'alignement (gauche, centre, droite et 
justifie) doit ainsi etre realise par une propriete de style CSS. 
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Les citations 

Les citations sont mises en avant dans le contenu textuel par les balises <biockquote> ... </biockquote>. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

Alexandru Vlahuta a dit :<br> 
<blockquote>La chance est un hasard, <br> 
le bonheur une vocation . </blockquote> 
</body> 
</html> 




«- C O file:///C:/UsersA r an? tff A 

Alexandru Vlahuta a dit : 

La chance, est un hasarcL 
le bonheur une vocation. 



Commentaires 

• La citation est affichee avec un saut de ligne avant et apres celle-ci comme pour les paragraphes. 

■ Elle s'affiche egalement avec un leger retrait par rapport a la marge gauche. L'usage de la balise <biockquote> 
est parfois detourne pour obtenir ce retrait. Preferez plutot la propriete de style margin-left. 

• II existe aussi la balise <q> ... </q> pour les citations. Celle-ci n'affiche pas d'espace avant et apres, ni de 
retrait. Elle est cependant reprise entre des guillemets. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<p>Alexandru Vlahuta a dit : 

<q>La chance est un hasard, 

le bonheur une vocation . </q> 

</p> 

</body> 

</html> 
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Alexandra Ylahuta a dit : "La chance est un 
hasarcL le bonheur une vocation." 
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Les separateurs horizontaux 



Le trait horizontal peut se reveler fort utile pour definir un changement dans le contenu. La balise <hr> realise cette 
fonction. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

Chapitre 1 

<hr> 

Chapitre 2 

</body> 

</html> 
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Chapitre 2 



Termine 



Commentaires 

• Pas de problemes de compatibility pour cette balise assez ancienne. 

• La balise <hr> est une balise unique qui ne comporte pas de balise de fermeture. Le Html5 admet aussi la 
notation <hr /> derivee du Xhtml 1.0. 

• Par defaut, cette ligne horizontale occupe toute la largeur de la fenetre du navigateur. 

• Les designers preferent souvent remplacer ce trait plutot basique sur le plan esthetique par une image 
graphiquement plus elaboree. 

• Tous les attributs align, noshade, size, width deja deprecies (deprecated) dans le Html 4.0 n'existent plus en 
Html5. II faut passer par les feuilles de style pour en determiner I'alignement, la tail le et la largeur. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style> 

hr { text-align: center; 
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height: 3px; 

background-color: black; 

width : lOOpx; } 
</style> 
</head> 
<body> 
Chapitre 1 
<hr> 

Chapitre 2 

</body> 

</html> 
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Chapitre 1 
Chapitre 2 

Termine 
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Les listes 



Les listes, bien connues des utilisateurs de traitement de texte, sont une fagon efficace pour structurer un contenu 
textuel. 



1. Les listes ordonnees 

Une liste ordonnee est mise en place par la balise <oi> ... <oi>. 

On determine ensuite, a I'interieur de ces balises, les elements ou les items de la liste, soit les balises <ii> ... </ii>. 
La structure generale d'une liste ordonnee ou numerotee est done : 

<ol> 

<li>Chapitre K/li> 

<li>Chapitre 2</li> 

<li>Chapitre 3</li> 

<li>Chapitre 4</li> 

</ol> 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

Les listes en Html5 : 
<ol> 

<li>Listes ordonnees</li> 
<li>Listes non-ordonnees</li> 
<li>Listes imbriquees</li> 
<li>Listes de def inition</li> 
<li>Le menu de listes</li> 
</ol> 
</body> 
</html> 




Les listes en Html5 



1. Listes ordonnees 

2. Listes non-ordonnees 

3. Listes imbriquees 

4. Listes de definition 

5. Le menu de listes 



Commentaires 



La balise <oi> est un classique du Html. El le est ainsi bien reconnue par les navigateurs. 



L'attribut type, qui permettait de remplacer les chiffres par les lettres (majuscules ou minuscules) ou des 
chiffres romains, ne fait plus partie du Html5. Nous y reviendrons dans la partie consacree aux feuilles de 
style CSS pour modifier les numerotations. 
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L'attribut start permet de commencer la numerotation a un autre chiffre que 1. Pour les amateurs de 
precision, cet attribut etait deprecie (deprecated) en Html 4.0 mais il est pourtant bien repris dans le Html5. 



• Le nouvel attribut Html5 reversed permet une numerotation descendante (5, 4, 3, 2, 1) au lieu de la 
numerotation ascendante habituelle (1, 2, 3, 4, 5). A ce jour, ce nouvel attribut n'est repris par aucun 
navigateur. 



2. Les listes non-ordonnees 

Les listes non-ordonnees, aussi appelees listes a puces, sont introduites par la balise <ui> ... </ui>. 

On determine ensuite, a I'interieur de cette balise, les elements ou les items de celle-ci, soit les balises <ii> ... </ii>. 

La structure generale d'une liste a puces est done : 

<ul> 

<li>Chapitre K/li> 

<li>Chapitre 2</li> 

<li>Chapitre 3</li> 

<li>Chapitre 4</li> 

</ul> 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

Les listes en Html5 : 
<ul> 

<li>Listes ordonnees</li> 
<li>Listes non-ordonnees</li> 
<li>Listes imbriquees</li> 
<li>Listes de def inition</li> 
<li>Le menu de listes</li> 
</ul> 
</body> 
</html> 




Les listes en Html5 : 



• Listes ordotm.ee s 

• Listes non-ordonnees 

• Listes imbriquees 

• Listes de definition 

• Le menu de listes 



Commentaires 

• La balise <ui> est un classique du Html. El le est ainsi bien reconnue par les navigateurs. 
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• L'attribut type qui permettait de changer quelque peu la forme de la puce (ronde pleine, ronde vide, carree) 
n'existe plus en Html5. Nous y reviendrons dans la partie consacree aux feuilles de style CSS pour modifier la 
forme des puces ou les remplacer par des images. 



• La forme des puces (disque plein ou disque vide) est determinee par le navigateur. 



3. Les listes imbriquees 

Rien ne s'oppose a elaborer des listes ordonnees et des listes non-ordonnees imbriquees. Le codage est simplement 
un peu plus complexe. 



Exemple 



Soit une liste numerotee dans laquelle s'imbrique une liste a puces. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<ol> 

<li>Les titres</li> 
<li>Les listes en Html5 
<ul> 

<li>Listes ordonnees</li> 
<li>Listes non-ordonnees</li> 
<li>Listes imbriquees</li> 
<li>Listes de def inition</li> 
<li>Le menu de listes</li> 
</ulx/li> 

<li>Les tableaux en Html5</li> 
<li>Les formulaires en Html5</li> 

</ol> 

</body> 

</html> 
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1 . Les titres 

2. Les listes en Html5 

a Listes ordonnees 
° Listes non-ordonnees 
° Listes imbriquees 
° Listes de definition 
a Le menu de listes 

3. Les tableaux en Html5 

4. Les formulaires en Html5 



4. Les listes de definition 

Le Html propose une derniere sorte de liste, particulierement utile pour presenter, par exemple, des glossaires. Cette 
liste, dite de definition, presente une liste de termes, chacun d'entre eux etant suivi de sa description. 

La liste se construit d'abord par la declaration d'une liste de definition (definition list), soit <di> ... </di>. 
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Entre ces balises, on reprend ce qu'on a appele le terme par labalise <dt> 
labalise <dd> ... </dd>. 

La structure generale d'une liste de definition est done : 



... </dt> suivi par la description dans 



<dl> 

<dt>Terme Kdt> 

<dd>Def inition K/dd> 
<dt>Terme 2<dt> 

<dd>Def inition 2</dd> 
<dt>Terme 3<dt> 

<dd>Def inition 3</dd> 

</dl> 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<p>Balises de listes disponibles :</p> 
<dl> 

<dt>ol</dt> 

<dd>Liste ordonnee</dd> 
<dt>ul</dt> 

<dd>Liste non-ordonnee</dd> 
<dt>dl</dt> 

<dd>Liste de def inition</dd> 

</dl> 

</body> 

</html> 
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Balises de Listes disponibles : 
ol 



ul 



dl 



Liste ordonnee 



Liste non-ordonnee 



Liste de definition 
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Les divisions de page 



1. Les elements de type bloc 

Comme nous avangons dans notre etude du Html, il nous parait opportun de parler de la division en bloc et en ligne 
des elements. 

Chaque balise Html est interpretee par les navigateurs qui en determinent le rendu visuel ou I'affichage par 
I'intermediaire de feuilles de style CSS appliquees par defaut. 

II existe deux grands groupes de balises : les balises de rendu CSS bloc (block) et les balises de rendu CSS en ligne 
(inline). 

Les balises de rendu CSS bloc occupent par defaut toute la largeur de la fenetre du navigateur. El les se placent ainsi 
les unes au-dessus des autres. Generalement, le navigateur insere automatiquement un espace au-dessus et en 
dessous du contenu de la balise 

C'est le cas de la balise de titre <hx> et de toutes les balises de ce chapitre. Elles sont toutes des balises de type 
bloc. 

Une balise de titre ou de paragraphe occupe toute la largeur de la page et est separee par un espace plus ou moins 
important. 

Le code <p>Paragraphe i</p><p>Paragraphe 2</p> va s'afficher sur deux lignes car la balise <p> est une balise de 
type bloc. Chaque paragraphe va occuper une ligne. 

Les principaux elements de division de type bloc qui seront detailles tout au long de notre etude sont : 
• Les balises de titres <hx> ... </hx>. 



• Les balises de paragraphe <p> ... </p>. 

• Les balises de Citation <blockquote> ... </blockquote>. 

• La balise <hr> qui introduit une ligne horizontale. 

• Les balises <oi> ... </oi> des listes ordonnees. 

• Les balises <ui> ... </ui> des listes a puces. 

• Les balises <di> ... </di> des listes de definitions. 



• Les balises de tableaux <tabie> ... </tabie>. 

• Les balises de declaration de formulaires <form> ... </form>. 

• La balise <div> ... </div> specialement congue pour introduire une division (div pour division) sans passer par 
une des balises citees ci-avant. Cette balise est particulierement utile pour appliquer une declaration de 
feuilles de style CSS. 

Notons qu'une balise de type bloc peut contenir une (ou plusieurs) balise(s) de type bloc. Ainsi, par exemple, une 
citation incluse dans un paragraphe. 

L'extension Web Developer de Firefox permet de visualiser les differents elements bloc d'une page et par 
consequence la structure de celle-ci : Outils - Web Developer - Entourer - Entourer les elements de type block. 

Soit le code : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 
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<body> 

<hl>Le Html5</hl> 

<h3>Le document Html5 minimum</h3> 
<p>Un document Html5 doit contenir :</p> 
<ul> 

<li>un doctype</li> 
<li>la balise html</li> 
<li>la balise head</li> 
<li>la balise title</li> 
<li>la balise body</li> 
</ul> 

<p>Reagir a cet article :</p> 
<form action=""> 

<textarea rows="2" cols="25"x/textarea><br> 

<input value="Envoyer " type=" submit " > 

<input value="Retablir " type="reset"> 

</f orm> 

</body> 

</html> 



Dans Firefox avec I'extension Web Developer 



(§) Htm 15 - Mozilla Firefox 



WmEM 



Fichier Edition Affichage Historique Marque-pages 



- G X n!> (□ «e<? - D 



Htm 15 



Le HtmlS 



Le document HtmlS minimum 



Un document Html5 doit contenir : 



• un doctype 

• la balise html 

• la balise head 

• la balise title 

• la balise body 



Reagtr a cet article : 







Envoy er 


Retablir 





Term in e 



it 



2. Les elements de type en ligne 



Au contraire des elements de type bloc, les elements en ligne se placent toujours I'un a cote de I'autre afin de rester 
dans le flux du texte. 

Ainsi, le code texte en <b>gras></b> et en <i>itaiique</i> est restitue sur une seule ligne, sans interrompre le flux 
du texte : texte en gras et en italique. 



- 2- 
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Le chapitre precedent contenait beaucoup de balises en ligne car elles n'affectaient que du texte. 
Les principales balises en ligne sont : 

• La balise <b> ... </b> de mise en gras du texte. 

• La balise <i> ... </i> de mise en italique du texte. 

• La balise <br> de passage a la ligne. 

• La balise <a> pour les liens. 

• La balise <img> pour les images. 

• Les balises de champs de formulaires <input>, <select> ... </select> et <textarea> ... </textarea>. 

• La balise <span> pour introduire une division en ligne dans le texte. Cette balise est particulierement utile 
pour appliquer une declaration de feuilles de style CSS. 



© ENI Editions - All rights reserved - Algeria Educ 



- 3- 



L'insertion d'un lien 



Les liens constituent I'essence du langage Html et des pages Web. La richesse de la fonction hypertexte permet de 
tisser cette toile gigantesque qu'est le Web. 

La balise <a> ... </a> introduit un lien. Sa syntaxe de base est : 
<a href="destination_du_lien">Texte de lien</a> 
La destination du lien peut etre : 

• Un endroit de la page en cours. 

• Une autre page du site. 

• Un endroit dans une autre page du site. 

• Une page d'un autre site situe sur le Web. 

• Une adresse electronique. 

• Un fichier a telecharger. 

La balise de lien possede differents attributs : 
href 

L'attribut href definit I'adresse (url) de la cible du lien, 
hreflang 

Precise la langue du document cible si celle-ci est differente de celle du document de depart, 
ping 

Nouveau en Html5. L'attribut ping peut contenir une liste d'adresses url (separees par un espace) qui recevront une 
notification lorsque I'utilisateur suit le lien. 

<a href ="html5 . htm" ping="http : / /www .monsite . com/data/visites . php> 
Html5</a> 

Le navigateur va alors envoyer une requete POST a I'adresse url specifiee dans l'attribut. Ce nouvel attribut sera 
particulierement utile pour les statistiques d'un site. Dans le cas present, il permettra de connaitre le nombre de 
visiteurs de la partie consacree au Html5. 

rel 

Nouveau en Html5. Specifie la relation entre le document de depart et le fichier cible du lien. 

Les valeurs SOnt nombreuses : alternate, archives, author, bookmark, contact, external, first, help, icon, index, 
last, license, next, nofollow, noreferrer, pingback, prefetch, prev, search, stylesheet, sidebar, tag, up. 

Cet attribut n'est que tres partiellement implements dans les navigateurs recents. 

target 

Specifie au navigateur la fagon d'afficher la cible du lien. Cela peut etre dans une nouvelle instance du navigateur ou un 
nouvel onglet du navigateur (target="_biank"), dans la meme fenetre que la page de depart du lien (target="-seif ") 
et dans la meme fenetre mais en occupant la totalite de la fenetre du navigateur. 

Nous y reviendrons plus longuement a la section "Le lien vers une fenetre specifique" du present chapitre. 
type 

Indique au navigateur le type MIME de la cible si celui-ci n'est pas un document Html5, par exemple un fichier son ou 
une image. 

Les attributs Html 4.0 suivants ont disparu de la specification Html5 : charset, coords, name, rev et shape. 

Le plus frequemment utilise etait l'attribut name pour definir les ancres pour les liens a I'interieur d'un document. Nous y 
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reviendrons a la section "Le lien a I'interieur d'une page" du present chapitre. 
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Le lien vers une autre page 



Les premiers liens lors de I'apprentissage de la publication Web, consistent a pointer vers une autre page situee dans 
le site (adressage relatif). 

Pour la creation d'un site, il est fortement recommande de regrouper tous les fichiers relatifs au site dans un seul 
dossier. Libre a vous de creer dans ce dossier des sous-dossiers. 



1. Lien vers une page situee dans le meme dossier 

L'adressage relatif n'est pas sans poser de problemes dans le cas d'une arborescence complexe. 

Debutons notre etude par le cas le plus simple. Soit deux fichiers (pagel.htm et page2.htm) situes dans le meme 
dossier. 



Effectuons dans la page 1 un lien vers la page 2. 
Le code du lien dans la page 1 devient : 

<a href ="page2 . htm">Lien vers page 2</a> 



£% II est imperatif de respecter scrupuleusement les majuscules et minuscules dans le nom du fichier ainsi que 
d'eviter les espaces car ce qui est reconnu par Windows installe sur votre ordinateur ne le sera peut-etre 
pas par I'hebergeur de votre site qui utilise, par exemple, un serveur Unix. 



2. Lien vers une page situee dans un autre dossier 

Dans les sites d'une certaine importance, on ne peut se contenter de mettre tous les fichiers dans un seul et unique 
repertoire. Pour structurer le site, il n'est pas rare d'avoir dans le meme dossier de depart plusieurs sous-dossiers. 

La conception du chemin d'acces au fichier peut se reveler quelque peu deroutante d'autant que la methode 
d'adressage s'inspire de celle adoptee par Unix, peu familiere aux concepteurs habitues a Windows. 

Soit la situation suivante. Le dossier de depart comporte a la racine un fichier index.htm, un sous-dossier dossierl 
avec le fichier pagel.htm et un autre sous-dossier dossier2 avec le fichier page2.htm. Cette arborescence nous 
permettra d'aborder plusieurs cas de figure. 




m pagel.htm 
- page2.htm 




- pagel.htm 



- page2.htm 



index htm 



dossier 1 



dossier 2 



a. Lien a partir de index.htm vers pagel.htm 
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y pagel.htm 



index.htm 



dossier 1 



Le code dans index.htm devient : 

<a href="dossierl/pagel . htm">Texte du lien </a> 
Commentaires 

• Le fichier index.htm et le dossier dossierl se situent au meme niveau de I'arborescence. Une fois dans 
dossierl, il suffit de "descendre" vers pagel.htm. 

• C'est bien la barre oblique / qui est utilisee et non la barre oblique inverse \ que Ton rencontre parfois avec 
Windows. 

b. Lien a partir de pagel.htm vers page2.htm 



Le code dans pagel.htm devient : 

<a href=" . . /dossier2/page2 . htm">Texte du lien</a> 
Commentaires 

Pour aller de pagel.htm vers page2.htm, il faut d'abord remonter d'un niveau pour sortir de dossierl. Pour 
remonter d'un niveau, on utilise la notation "../". Une fois remonte d'un niveau, il faut descendre vers dossier2 et 
une fois dans dossier2, descendre pour aller chercher page2.htm. 

c. Lien a partir de page2.htm vers index.htm 




dossier 1 



dossier 2 




^ pagel.htm 



2 page2.htm 




index htm 



dossier I 



dossier 2 



Le code dans page2.htm devient : 



<a href =".. /index . htm" >Texte du lien</a> 



Commentaires 
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Pour aller de page2.htm vers index.htm, il faut d'abord remonter d'un cran dans I'arborescence pour sortir de 
dossier2, d'ou la notation ../■ En "redescendant", on trouve directement index.htm. 
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Le lien a I'interieur d'une page 



Dans une page d'une certaine importance, generalement d'essence textuelle, il est interessant de pouvoir mener 
I'utilisateur a un endroit precis du document. On utilise alors la technique des ancres {anchor) ou des signets. 



Ce lien a I'interieur de la page s'execute en deux temps : 

• La declaration de I'ancre. 

• Le lien vers I'ancre. 

La declaration de I'ancre 

Les ancres vont definir un endroit dans la page, ce qui permettra de faire un lien vers celui-ci. 
La syntaxe de creation d'une ancre est : 

<a id="nom de l'ancre"x/a> 

Avec la disparition de I'attribut name en Html5, la declaration de I'ancrage se realise par un identifiant id. C'etait deja le 
cas en Xhtml 1.0. 

Notons aussi que I'ancre n'est pas affichee dans le navigateur. 

Les liens vers une ancre situee dans la meme page 

Apres avoir defini I'ancre, il faut effectuer le lien vers celle-ci. 

Pour creer ce lien, il suffit de reprendre dans I'attribut href le nom de I'ancre directement precede du signe diese (#). 

<a href="#nom de 1' ancre>Texte du lien</a> 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<a href =" #chapit re2 " >Aller au chapitre 2</a> 
<h3>Chapitre K/h3> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 

non risus. Suspendisse lectus tortor, dignissim sit amet, 

adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 

diam . . . </p> 

<h3>Chapitre 2</h3> 

<a id="chapitre2"x/a> 

<p>Contenu du chapitre 2</p> 

</body> 

</html> 




,— Lien vers texte 1 



Exemple 
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C:\UsersWan Lai 



Aller au chapitre 2 



spit 

w 



\\\ 



Chapitre 1 

Lorem ipsum dolor s 
adipiscing elit. Sed i 
lectus fortor = digniss 
cec : ultricies sed : do 
ultrices diarn. Maec* 



file:///C:/Users.rt 



Cbapitre 2 

Contenu du chapitre 2 



Les liens vers une ancre situee dans une autre page 

Le principe est le meme mais il faudra egalement definir I'adressage (relatif ou absolu) de la page. 
Exemole 

A partir du fichier index.htm, effectuez un lien vers une ancre du fichier pagel.htm du dossier dossierl. 

Apres avoir ajoute une ancre, soit <a id="ancre"></a> dans le fichier pagel.htm, le lien dans le fichier index.htm 
devient : 



<a href ="dossier 1 /pagel . htm#ancre>Texte du lien</a> 



- 2- 



© ENI Editions - All rights reserved - Algeria Educ 



Le lien vers un autre site 



Un lien peut faire reference a des pages d'autres sites, situees a une autre adresse sur le Web. La destination dans la 
balise de lien sera alors I'adresse complete du site ou de la page. On parle alors d'adressage absolu. 

Soit par exemple : 

<a href ="http : / /www . w3 . org/ standards /index . htm" >Lien</a> 

Precisons qu'il s'agit bien de I'adresse complete, avec la mention du protocole http://. En effet, avec les navigateurs 
recents, cette mention est devenue facultative et est ignoree par la plupart des utilisateurs. 
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Le lien vers une adresse email 



Pour ajouter un element d'interactivite, il est interessant de permettre aux visiteurs de vous contacter par courrier 
electronique. 

La destination dans la balise de lien sera alors I'adresse electronique, precedee du protocole du courrier electronique 
{mail), soitmaiito: (avec simplement un double-point). 

<a href ="mailto : editions@eni . com" >L' auteur</a> 

L'activation du lien ouvrira une fenetre de I'application de messagerie electronique par defaut du visiteur. Par exemple, 
Microsoft Outlook. 

Bien qu'il ne s'agisse pas de code Html a proprement parler, il est aussi possible de predefinir un objet du message 
ainsi envoye ou prevoir I'envoi d'une copie a un autre destinataire. 

• Pour predefinir un objet a I'e-mail : 

<a href="mailto : editions@eni . com?sub ject=Formation Html5">Editions ENK/a> OU le COntenu de subject est 

I'objet (predefini). Dans le cas de notre exemple, il s'agit de "Formation Html5". 

• Pour definir une copie du message : 

<a href ="mailto : editions@eni . com?cc=auteur@eni . com">Editions ENK/a> OU le COntenu de cc est I'adresse 

electronique destinee a la copie. 

• Pour combiner les possibilites : 

<a href ="mailto : editionsSeni . com?sub ject=Formation Html5&cc=auteur@eni . com">Editions ENK/a> 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<a href ="mailto : editions@eni . com?sub ject=Formation 
Html5&cc=auteur@eni . com"> Editions ENK/a> 
</body> 
</html> 
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Le lien pour telecharger un fichier 



Pour permettre de telecharger un fichier, il suffit de specifier le nom (avec I'extension) de celui-ci. Cette fagon de 
proceder est valable pour autant que le fichier Html et le fichier offert en telechargement soient situes dans le meme 
dossier ou sous-dossier. 

Soit un fichier "formation.pdf" situe dans le meme dossier. Le code devient : 

<a href =" format ion . pdf" >Version PDF</a> 

Si une application qui lit les fichiers pdf (Adobe Acrobat Reader par exemple) n'est pas installee sur I'ordinateur du 
visiteur, le navigateur de celui-ci propose la fenetre d'invite de telechargement. Par contre, si I'application Adobe 
Acrobat Reader est presente sur le poste du visiteur, le navigateur ouvre I'application et affiche le fichier. 

II en sera de meme pour tous les autres types de fichiers. Quand il n'y a pas d'application definie par defaut pour 
I'extension du fichier, le navigateur telecharge le fichier, apres avoir propose la fenetre d'invite de telechargement. 
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Le lien vers une fenetre specifique 

Les pages ciblees par un lien peuvent s'ouvrir dans des fenetres specifiques grace a I'attribut target. 
Passons en revue les differentes possibilities : 

• target="_seif " (defaut). La page cible du lien s'ouvre dans la meme fenetre que la page de depart du lien. 

• target="_top". La page cible du lien est affichee dans la meme fenetre mais occupera la totalite de la fenetre 
d'affichage. A ce stade de notre etude, self et top ont un effet equivalent. 

• target="_biank". La page cible du lien s'ouvre dans une nouvelle instance du navigateur ou un nouvel onglet 
de celui-ci. 

NOUS illustrons cet attribut target et specialement target="_blank". 

Dans le fichier Page 1 : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

Vers <a href ="page2 . htm" target="_blank">Page 2</a> 

</body> 

</html> 





i „- — ,, 

1 = II E> ll*@*l 






Vers Page 2 


^ C:\UsersWan Lai - C X •] 


Page 2 
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La couleur et le soulignement des liens 



Heritage datant du debut du Html, les liens apparaissent par defaut soulignes et de couleur bleue pour le lien non 
visite, de couleur pourpre pour le lien visite et rouge pour le lien actif. 

Le soulignement est une convention majeure du Web pour indiquer les liens hypertextes. Pour ne pas derouter 
I'internaute debutant, celle-ci doit etre maintenue le plus souvent possible. Pourtant sous le plan esthetique, le 
soulignement systematique dans une page comportant de nombreux liens, peut alourdir la presentation de la page. 

II est possible d'enlever le soulignement par une simple feuille de style (text-decoration: none). 

De meme, pour uniformiser la couleur des liens, la propriete de style color: vaieur; peut etre utilisee. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<style type="text/css"> 
a { text-decoration: none; 
color : black; } 

</style> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

Vers <a href="pagel .htm">Page K/axbr> 
Vers <a href="page2 .htm">Page 2</axbr> 
Vers <a href="page3 .htm">Page 3</axbr> 
</body> 
</html> 





IDS 
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Une infobulle sur un lien 



L'attribut titie="texte" (qui n'est pas specifique a la balise de lien) permet de proposer une infobulle explicative au 
survol du lien par le curseur de la souris. Ce petit "plus" en ergonomie est surtout apprecie en termes d'accessibilite, 
par les interfaces vocales qui guident les surfeurs non-voyants. 

Initialement reprise par Internet Explorer, cette infobulle apparait dans tous les navigateurs de notre etude. 

<a href ="page2 . htm" title="lien vers le chapitre 2">Suite</a> 
Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<a href ="page2 . htm" title="Lien vers le chapitre 2">Suite</a> 

</body> 

</html> 
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Les nouvelles possibilities de liens 



Les liens peuvent maintenant porter sur n'importe quel element de type bloc comme les divisions (<div>) et items de 
liste (<ii>). 

Ainsi, le code suivant est valide en Html5 alors qu'il ne Test pas en Html 4.0. 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http : //www. w3 . org/TR/html4/ loose . dtd"> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<style> 

div { width: 280px; 

height: lOOpx; 

border: lpx solid black; 

padding-left: 3px; } 
a { text-decoration: none; 

color : black; } 
</style> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<p>Cliquez sur l'extrait pour le texte complet.</p> 
<a href ="page2 . htm" > 

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 

non risus. Suspendisse lectus tortor, dignissim sit amet, 

adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 

diam . . .</ div> 

</a> 

</body> 

</html> 




C:\Users\Van Lai 



Cliquez sur l'extrait pour le texte complet. 



Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Sed non risus. Suspendisse 
lectus tortor, dignissim sit atnet, adipiscing 
nec, ultricies sed, dofU. Cras elementum 
ultrices diam... 



Htm 15 



Le curseur en forme de main atteste I'existence d'un lien sur I'ensemble de la division. 
Voila qui risque d'etre deroutant pour I'utilisateur quand ceci se mettra en place ! 
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Preambule 



Le mouvement s'etait deja amorce avec le Html 4.0 et le Xhtml 1.0. II se renforce avec le Html5. Les tableaux sont 
exclusivement reserves a la presentation de donnees. II n'est plus question dans une application Web moderne 
d'utiliser les tableaux pour realiser la disposition de la page. Ces tableaux de presentation, souvent imbriques dans 
d'autres tableaux, etaient le defaut de la conception de pages Web dans ce que Ton peut appeler a posteriori le Web 
1.0. Ces multiples tableaux alourdissaient le code source et en rendaient la lecture quasi impossible. Par ailleurs, ces 
tableaux complexes compliquaient grandement la lecture des aides vocales utilisees par les personnes non voyantes. 
La disposition des elements de la page est maintenant assuree par des balises <div>. 

Rien de bien nouveau dans le Html5 par rapport au Html 4.0. II faut cependant noter la disparition de tres nombreux 
attributs de presentation qui doivent maintenant etre imperativement repris par des feuilles de style CSS. Tout ceci 
sera detaille dans la suite de ce chapitre. 

Toutes les balises et tous les attributs du Html5 relatifs aux tableaux sont parfaitement compatibles avec les 
navigateurs du marche. 
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La creation d'un tableau 

Un tableau (<tabie>) comporte des lignes <tr>. Ces lignes contiennent des cellules <td>. 

L'agencement de ces differentes balises pour afficher un tableau suit une logique que I'exemple suivant nous 
permettra d'illustrer. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<table> 

<tr> 

<td>K/td><td>2</td> 

</tr> 

<tr> 

<td>3</td><td>4</td> 

</tr> 

</table> 

</body> 

</html> 



Le tableau en Html se construit ainsi : 

• On declare que Ton ouvre un tableau avec la balise <tabie>. 

• Ce tableau comporte une premiere ligne introduite par la balise <tr>. 

• Cette ligne comporte une premiere cellule que Ton ouvre avec la balise <td>. 

• Soit 1 comme unique contenu de cette cellule. 

• Fermeture de cette premiere cellule </td>. 

• Passons a la seconde cellule <td>2</td>. 

• Fin de la premiere ligne, done </tr>. 

• Vient la ligne suivante soit a nouveau <tr>. 

• Cette ligne contient les cellules <td>3</td><td>4</td>. 

• Fin de la seconde ligne </tr>. 

• Et enfin la balise de fermeture du tableau </tabie>. 
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Commentaires 



• Cette balise, basique en Html, est parfaitement compatible entre les differents navigateurs. 



• La balise <tabie> doit obligatoirement etre fermee. En cas d'oubli de la balise de fermeture </tabie>, le tableau 
risque de ne pas s'afficher ou ne pas s'afficher correctement. 

Passons aux attributs de la balise <tabie>. A notre grande surprise, cette balise ne comporte plus d'attributs en 
Html5 I En fait, nous aurions pu ecrire, ne comporte plus d'attributs. Le Html 4.0 proposait les attributs width, border, 
ceiipadding, cellspacing, frame et rules. Tous ces attributs ont disparu en Html5 et doivent etre pris en charge par 
des feuilles de style CSS. 

Les balises <tr> et <td> suivent le mouvement avec la disparition des attributs align et vaiign. 



1. La largeur du tableau 

La largeur du tableau est determinee par la propriete de style CSS width (largeur). 



Exemple 

Le code precedent pour une largeur de tableau de 250 pixels devient : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { width: 250px; } 

</style> 

</head> 

<body> 

<table> 

<tr> 

<td>K/td><td>2</td> 

</tr> 

<tr> 

<td>3</td><td>4</td> 

</tr> 

</table> 

</body> 

</html> 
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II est egalement possible de determiner la hauteur du tableau par la propriete de style height. 



<style> 

table { height: 150px; } 
</style> 



2. Les bordures du tableau 

Les bordures d'un tableau et d'autres elements Html sont introduits par la propriete de style CSS border (pour 
bordure). 

Pour obtenir des bordures classiques d'un tableau, la demarche est un peu plus particuliere. 

Notre but est d'ajouter une bordure de 1 pixel (lpx), de couleur noire (black) et avec un trait plein (solid). 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { border: lpx solid black; 

width: 250px; } 

</style> 

</head> 

<body> 

<table> 

<tr> 

<td>K/td><td>2</td> 

</tr> 
<tr> 

<td>3</td><td>4</td> 

</tr> 

</table> 

</body> 

</html> 



1 2 

3 4 



Le resultat ne repond pas tout a fait a nos attentes et c'est logique car nous avons demande par la propriete de 
style d'ajouter une bordure au tableau (table). II faut egalement demander d'ajouter une bordure aux cellules <td> 
qui constituent le tableau (td). 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
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<meta charset="iso-8859-l"> 
<style> 

table { border: lpx solid black; 

width : 250px; } 
td { border: lpx solid black; 

width: 33%;} 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td>K/td><td>2</td> 

</tr> 

<tr> 

<td>3</td><td>4</td> 

</tr> 

</table> 

</body> 

</html> 



1 


2 


3 


4 



Ce qui ne correspond toujours pas au resultat escompte car il subsiste un espace entre la bordure du tableau et les 
bordures des cellules (vestige de I'attribut cellspacing pour les inities). Pour reduire ces deux bordures en une seule, 
on utilise la propriete de style border-collapse. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { border: lpx solid black; 

border-collapse: collapse; 

width: 250px; } 
td { border: lpx solid black;} 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td>K/td><td>2</td> 

</tr> 

<tr> 

<td>3</tdxtd>4</td> 

</tr> 

</table> 

</body> 

</html> 
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II existe en CSS d'autres formes de bordures. Celles-ci seront detaillees dans la partie de cet ouvrage consacree aux 
feuilles de style. 



3. L'alignement du tableau 

Le tableau est ici aligne a gauche. Pour un alignement centre, il faut passer par une astuce. Le fait de mettre une 
marge (margin) automatique a gauche (left) et a droite (right) du tableau provoque le centrage. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { margin-left: auto; 

margin-right: auto; 

border: lpx solid black; 

border-collapse: collapse; 

width : 250px; } 
td { border: lpx solid black;} 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td>K/td><td>2</td> 

</tr> 

<tr> 

<td>3</tdxtd>4</td> 

</tr> 

</table> 

</body> 

</html> 
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4. L'alignement des cellules du tableau 

Le contenu des cellules est ici aligne a gauche. II serait plus esthetique de le centrer (center) dans les cellules. La 
propriete de style text-align est alors utilisee. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { text-align: center; 

border: lpx solid black; 

border-collapse: collapse; 

width: 250px; } 
td { border: lpx solid black;} 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td>K/td><td>2</td> 

</tr> 
<tr> 

<td>3</td><td>4</td> 

</tr> 

</table> 

</body> 

</html> 
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Commentaire 

Avec text-align: center applique au tableau (<tabie>), toutes les cellules du tableau auront un contenu centre 
dans celles-ci. 
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Les cellules de tableaux 



Les cellules peuvent contenir tous les elements definis par le Html, soit du texte, des images, des liens, des arriere- 
plans et meme des tableaux. 

En Html5, les attributS width, height, align, valign, abbr, axis et scope du Html 4.0 Ont disparu. 



1. La largeur des cellules 

Par defaut, le navigateur adapte la largeur des cellules selon leur contenu. 

Soit I'exemple suivant d'un tableau de trois colonnes sans specifications particulieres. 



Cellule 1 


Cel2 


3 


Cellule 4 


Cel5 


6 



II faudra avoir recours a la propriete de style width mais cette fois appliquee a la balise <td> pour uniformiser la 
largeur des cellules. 



Exemple 



<!DOCTYPE html> 


<html lang=' 


fr"> 


<head> 




<title>Html5</title> 


<meta charset="iso-8859-l"> 


<style> 




table { border: lpx solid black; 


border-collapse: collapse; 


width: 250px; } 


td { border: 


lpx solid black; 


width : 


33%; } 


</style> 




</head> 




<body> 




<table> 




<tr> 




<td>Cellule 


K/td><td>Cel 2</td><td>3</td> 


</tr> 




<tr> 




<td>Cellule 


4</tdxtd>Cel 5</td><td>6</td> 


</tr> 




</table> 




</body> 




</html> 
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2. L'alignement horizontal 



L'alignement horizontal du contenu d'une cellule peut etre a gauche, centre ou a droite. Celui-ci est obtenu par la 
propriete de style text-align appliquee a une cellule. La propriete text-align peut prendre la valeur left (gauche), 
center (centre) ou right (droite). La valeur par defaut est left. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { border: lpx solid black; 

border-collapse: collapse; 

width: 290px; } 
td { border: lpx solid black; 

width: 33%; } 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td style="text-align: 
<td style="text-align: 
<td style="text-align: 

</tr> 
<tr> 

<td style="text-align: 
<td style="text-align: 
<td style="text-align: 

</tr> 
</table> 
</body> 
</html> 



left; ">Produit K/td> 
center; ">En stock</td> 
right; ">3.43 €</td> 



left; ">Produit 2</td> 
center; ">En commande</td> 
right; ">6 . 72 €</td> 



Htm 15 - Mozilla Firefox 



Fichier Edition Affidiage Historique Marque-pages 

e x ^ ( □ tfcft -i 



Htm 15 



Produit 1 


En stock 


3.43 € 


Produit 2 


En commande 


6.72 € 



Terrnine 



La propriete de style a ete appliquee ici directement dans le code le la balise <td> par styie="text-aiign: 
xxx ; " (style en ligne). II y a d'autres facons d'implementer cette propriete de style. Vous les decouvrirez lors de 
I'etude plus detaillee des feuilles de style CSS. 



3. L'alignement vertical 

Par defaut, l'alignement vertical du contenu d'une cellule est le milieu de la cellule. Ce qui risque d'entrainer des 
situations peu esthetiques lors de I'elaboration de votre tableau. 
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1 


XXXXX xxxxx xxxxx 

AAAAA AAAAA 


2 


XXXXX XXXXX 


3 


xxxxx xxxxx xxxxx 
xxxxx xxxxx xxxxx 
xxxxx 



II est prudent de prevoir un alignement vertical vers le haut par la propriete de style vertical-align : top applique 
aux cellules <td>. 



Exemple 

<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { border: lpx solid black; 

border-collapse: collapse; 

width: 140px; } 
td { border: lpx solid black; 

vertical-align: top; } 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td style="width: 10%;">K/td> 
<td>xxxxx xxxxx xxxxx xxxxx xxxxx</td> 

</tr> 
<tr> 

<td style="width : 10%;">2</td> 

<td>xxxxx xxxxx</td> 

</tr> 

<tr> 

<td style="width: 10%;">3</td> 

<td>xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx xxxxx</td> 

</tr> 

</table> 

</body> 

</html> 
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XXXXX xxxxx 



xxxxx xxxxx xxxxx 
xxxxx xxxxx xxxxx 
xxxxx 



Termine 
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4. La marge interieure des cellules 



Dans nos captures d'ecran, le contenu de la cellule est accole a la bordure de celle-ci. Ce qui n'est pas tres esthetique 
et nuit a la lisibilite des donnees. La propriete de style padding permet d'ajouter de I'espace entre le contenu de la 
cellule et la bordure de celle-ci. 

II est important de distinguer la marge exterieure qui est designee par margin et la marge interieure qui est reprise 

SOUS le VOCable padding. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { border: lpx solid black; 

border-collapse: collapse; 

width : 250px; } 
td { border: lpx solid black; 

padding: 15px; } 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td>K/td><td>2</td><td>3</td> 

</tr> 
<tr> 

<td>4</td><td>5</td><td>6</td> 

</tr> 

</table> 

</body> 

</html> 
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On remarque que la propriete de style padding a ajoute de I'espace tout autour du contenu de la cellule. II est 
possible de n'ajouter un espace qu'entre la bordure gauche et le contenu par la propriete padding-left. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { text-align: center; 

border: lpx solid black; 
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border-collapse: collapse; 
width: 250px; } 
td { border: lpx solid black; 
padding-left: 5px; ) 

</style> 

</head> 

<body> 

<table> 

<tr> 

<td>K/td><td>2</td><td>3</td> 

</tr> 
<tr> 

<td>4</td><td>5</td><td>6</td> 

</tr> 

</table> 

</body> 

</html> 
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5. L'arriere-plan de couleur 

Depuis la disparition de I'attribut bgcolor, I'ajout d'une couleur d'arriere-plan doit passer par la propriete de style 

background-color. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { text-align: center; 

border: lpx solid black; 

border-collapse: collapse; 

width : 250px; } 
td { border: lpx solid black;} 
.couleur { background-color: #99ccff ; ) 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td>K/td> 

<td class=" couleur " >2</td> 

</tr> 
<tr> 

<td>3</td> 

<td class=" couleur " >4</td> 
</tr> 
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</table> 

</body> 

</html> 



Htrnl5 - Moiilla Firefox 
Fichier Edition Affichage Histo 




□ 1 



Htm IS 



1 


2 


3 


4 



Termine 



Cette propriete de style d'arriere-plan background-color peut aussi s'appliquer aux balises <tabie> et <tr>. 



Nous en apprendrons plus sur la notation des couleurs au chapitre Notions de base des CSS - La notation des 
couleurs. 
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La fusion des cellules 

II est possible de fusionner horizontalement ou verticalement des cellules. 
Soit un tableau de depart de deux lignes et trois colonnes. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l "> 

<style> 

table { border: lpx solid black; 

border-collapse: collapse; 

width: 250px; } 
td { border: lpx solid black;} 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td>K/td> 

<td>2</td> 

<td>3</td> 

</tr> 

<tr> 

<td>4</td> 

<td>5</td> 

<td>6</td> 

</tr> 

</table> 

</body> 

</html> 
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1. La fusion de colonnes 

Pour fusionner des colonnes, le Html5 dispose de I'attribut de cellule coispan="x" ou x correspond au nombre de 
colonnes que I'on souhaite fusionner horizontalement. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 
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table { border: lpx solid black; 

border-collapse: collapse; 

width: 250px; } 
td { border: lpx solid black;} 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td colspan="3" style="text-align : center; ">Titre du tableau</td> 

</tr> 
<tr> 

<td>4</td> 

<td>5</td> 

<td>6</td> 

</tr> 

</table> 

</body> 

</html> 
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2. La fusion de lignes 

Pour fusionner des lignes, le Html5 dispose de I'attribut decellule rowspan="x" ou x correspond au nombre de lignes 
que I'on souhaite fusionner verticalement. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { border: lpx solid black; 

border-collapse: collapse; 

width : 250px; } 
td { border: lpx solid black;} 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td rowspan="2">K/td> 

<td>2</td> 

<td>3</td> 

</tr> 
<tr> 

<td>5</td> 
<td>6</td> 
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</tr> 
</table> 
</body> 
</html> 



Commentaire 
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La premiere colonne des deux lignes est fusionnee. Remarquez I'alignement vertical centre par defaut. 
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Les cellules d'en-tete 



Les cellules d'en-tete de colonnes ou de lignes sont definies par la balise <th> 
sorte, un titre aux donnees de la colonne ou de la ligne. 



</th>. Elles fournissent, en quelque 



Dans les navigateurs visuels, le contenu de la balise <th> apparait en gras et en centre. C'est peut-etre pour cette 
raison que celle-ci est souvent negligee par les concepteurs. El le fait pourtant partie historiquement des balises 
d'encodage des tableaux en Html. Notons que leur apparence peut toujours etre modifiee par des feuilles de style CSS. 

La balise <th> a ete gardee dans la specification du Html5 car elle est d'une grande utilite avec les lecteurs d'ecran 
utilise par les personnes non voyantes. Elle contribue ainsi a I'accessibilite des sites web et particulierement des 
tableaux qui, s'ils sont d'une certaine ampleur, posent vite probleme lorsqu'ils sont decouverts par I'audition. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { border: lpx solid black; 

border-collapse: collapse; 

width : 250px; } 
td { border: lpx solid black;} 
</style> 
</head> 
<body> 
<table> 
<tr> 

<th>Attribut</th> 

<th>Fonction</th> 

</tr> 

<tr> 

<td><i>colspan</ix/td> 

<td>Pour la fusion de colonnes</td> 

</tr> 

<tr> 

<td><i>rowspan</ix/td> 

<td>Pour la fusion de lignes</td> 

</tr> 

</table> 

</body> 

</html> 
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Termine 



© ENI Editions - All rights reserved - Algeria Educ 



- 1 - 



Le resume du tableau 



L'attribut summary de la balise <tabie> permet de fournir un resume du tableau. 

Ce resume n'apparaitra en aucune fagon dans la presentation visuelle de la page. Celui-ci n'est pris en charge que par 
les syntheses vocales et autres barrettes braille pour fournir un resume du tableau avant I'exploration des donnees 
par les personnes visuellement deficientes. C'est une fois de plus un outil pour I'accessibilite des sites. 

Notons qu'en Html5, l'attribut summary est le seul et unique attribut de la balise <tabie>. 
Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style> 

table { border: lpx solid black; 

border-collapse: collapse; 

width: 250px; } 
td { border: lpx solid black;} 
</style> 
</head> 
<body> 
<table 

summary="Le tableau presente les attributs utilises pour fusionner 

les lignes et les colonnes d' un tableau Html"> 

<tr> 

<th>Attribut</th> 

<th>Fonction</th> 

</tr> 

<tr> 

<td><i>colspan</ix/td> 

<td>Pour la fusion de colonnes</td> 

</tr> 

<tr> 

<td><i>rowspan</ix/td> 

<td>Pour la fusion de lignes</td> 

</tr> 

</table> 

</body> 

</html> 



La capture d'ecran est identique a celle du point precedent etant donne que cet attribut n'a aucune action visuelle. 
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La legende d'un tableau 



La balise <caption> permet d'associer un titre ou une legende au tableau. 

La balise <caption> doit etre placee juste apres la balise ouvrante <tabie> et ne peut apparaitre qu'une fois dans le 
tableau. 

Par defaut, la plupart des navigateurs affichent le contenu de la balise <caption> de fagon centree au-dessus du 
tableau. II est possible de mettre cette legende en dessous du tableau a I'aide de la propriete de style CSS caption 
{caption-side: bottom}. 



Exemple 



<!DOCTYPE html> 


<html lang=' 


fr"> 


<head> 




<title>Html5</title> 


<meta charset="iso-8859-l"> 


<style> 




table { border: lpx solid black; 


border-collapse: collapse; 


width : 250px; ) 


td { border 


lpx solid black; } 


</style> 




</head> 




<body> 




<table> 




<caption>La 


legende du tableau</caption> 


<tr> 




<td>K/td> 




<td>2</td> 




<td>3</td> 




</tr> 




<tr> 




<td>4</td> 




<td>5</td> 




<td>6</td> 




</tr> 




</table> 




</body> 




</html> 
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Le groupement de colonnes 



La balise <coigroup> est utilisee pour grouper des colonnes en vue de leur appliquer une mise en forme a I'ensemble 
des balises du groupe par I'entremise d'une feuille de style CSS. 

L'attribut span="x" determine le nombre de colonnes ainsi groupees. Par defaut, la valeur de x est 1. Cet attribut span 
est le seul attribut de la balise <coigroup>. Les attributs align, vaiign, width du Html 4.0 ont disparu. 

En outre, la balise <coigroup> se positionne juste apres la balise <tabie> (ou juste apres la balise <caption> si celle-ci 
est utilisee) et avant toute balise <tr> ou <td>. 

Par definition, la balise <coigroup> ne s'applique que pour les tableaux. 
Exemple 1 

Soit un tableau de trois lignes et trois colonnes. Un arriere-plan de couleur ainsi qu'un alignement centre sont 
appliques aux deux premieres colonnes. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

table { border: lpx solid black; 

border-collapse: collapse; 

width : 250px; } 
td { border: lpx solid black;} 
colgroup { background-color : #99ccff; 
text-align: center;} 

</style> 
</head> 
<body> 
<table> 

<colgroup span="2"x/colgroup> 
<tr> 

<td>K/td><td>2</td><td>3</td> 

</tr> 

<tr> 

<td>4</td><td>5</td><td>6</td> 

</tr> 

<tr> 

<td>7</td><td>8</td><td>9</td> 

</tr> 

</table> 

</body> 

</html> 
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Si Ton souhaite regrouper les deux dernieres colonnes, il faut declarer plusieurs balises <coigroup>. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l "> 

<style> 

table { border: lpx solid black; 

border-collapse: collapse; 

width: 250px; } 
td { border: lpx solid black;} 
#colonnes { background-color : #99ccff; 
text-align: center;} 

</style> 
</head> 
<body> 
<table> 

<colgroup span=" 1 "></colgroup> 

<colgroup id="colonnes" span="2 "></colgroup> 

<tr> 

<td>K/td><td>2</td><td>3</td> 

</tr> 

<tr> 

<td>4</td><td>5</td><td>6</td> 

</tr> 

<tr> 

<td>7</td><td>8</td><td>9</td> 

</tr> 

</table> 

</body> 

</html> 
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La structuration d'un tableau 



Le Html5 prevoit des balises pour structurer de fagon logique le contenu d'un tableau. 
Ces balises sont : 

• <thead> pour regrouper les informations concernant I'en-tete du tableau comme par exemple le titre et I'intitule 
des colonnes. 

• <tbody> pour le corps du tableau, soit I'ensemble des donnees de celui-ci. 

• <tfoot> pour le contenu de bas de page comme par exemple des remarques ou une legende. 

Ces divisions logiques n'affectent en rien la presentation par defaut du tableau mais elles peuvent etre reprises par 
des proprietes de style pour agrementer la presentation du tableau. 

On notera que la balise <tfoot> doit se situer avant la balise <tbody> de sorte que le navigateur puisse prevoir le pied 
de page avant la reception des lignes de donnees. 

Exemple 



Appliquons ces balises a un tableau. 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset=" iso-8859-1 "> 




<style> 




table { border: lpx solid black; 




border-collapse: collapse; 




width: 250px; } 




1~ H { hnrHpr * 1 ny cnl i H hl^nlc*! 




</style> 




</head> 




<body> 




<table> 




<thead> 




<tr> 




<td colspan="2" style="text-align : center, 


">La fusion de lignes et 


de colonnes</td> 




</tr> 




</thead> 




<tf oot> 




<td colspan="2" style="text-align : center, 


">W3C Working Draft 24 


June 2010</td> 




</tf oot> 




<tbody> 




<tr> 




<td><i>colspan</ix/td> 




<td>Pour la fusion de colonnes</td> 




</tr> 




<tr> 




<td><i>rowspan</ix/td> 




<td>Pour la fusion de lignes</td> 




</tr> 




</tbody> 




</table> 




</body> 




</html> 
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La fusion de lignes et de colonnes 


colspan 


Pour la fusion de colonnes 


rowspan 


Pour la fusion de lignes 


W3C Working Draft 24 June 20 1 



Terrnine 



Ce tableau ne presente rien de particulier. Le meme tableau avec des proprietes de style affectant les balises <thead> 
et <tfoot> devient : 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




<style> 




table { border: lpx solid black; 




border-collapse: collapse; 




width : 250px; } 




td { border: lpx solid black;} 




thead { background-color: #99ccff; 




font-size: 1.4em;} 




tfoot { font-size: 0.7em;} 




</style> 




</head> 




<ChnH v ~> 




<table> 




<thead> 




<tr> 




<td colspan="2" style="text-align : center, 


">La fusion</td> 


</tr> 




</thead> 




<tf oot> 




<td colspan="2" style="text-align : center, 


">Source : W3C Working 


Draft 24 June 2010</td> 




</tfoot> 




<tbody> 




<tr> 




<td><i>colspan</ix/td> 




<td>Pour la fusion de colonnes</td> 




</tr> 




<tr> 




<td><i>rowspan</ix/td> 




<td>Pour la fusion de lignes</td> 




</tr> 




</tbody> 




</table> 




</body> 




</html> 
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Commentaire 



@ Htm 15 - Mozilla Firefox 
Fichier Edition Affichage Historique Marque-pages 



Htm 15 



La fusion 


colspan 


Pour la fusion de colonnes 


rowspan 


Pour la fusion de lignes 


Source 


W3C Werfcmg Draft 24 June 2010 



Termine 



La balise <tbody> est indispensable pour acceder au contenu d'un tableau en JavaScript. 
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Les formats d'image 



Pour reduire au maximum le temps de telechargement, le Web reclame des formats de fichier particuliers ; le format 
GIF, JPEG et PNG. Ces trois types de format comportent tous un algorithme de compression. 

Sans deborder sur le sujet du traitement des images numeriques qui depasserait le cadre de cet ouvrage, detaillons 
brievement ces trois formats. 

Le format GIF 

Le format GIF (pour Graphics Interchange Format) a connu son heure de gloire aux debuts du Web. II etait alors 
parfaitement adapte aux cartes graphiques de I'epoque (souvent maximum 256 couleurs) et aux faibles capacites des 
lignes de telephone analogiques (taux de compression eleve). 

Caracteristiques 

Le format GIF ne permet de coder les images qu'en maximum 256 couleurs. Ce qui n'est plus tres realiste avec les 
developpements et les possibilites des images numeriques. 

• C'est un format de compression efficace et rapide. Les images GIF sont d'un poids en octet reduit. 

• La compression s'effectue sans perte de donnees et sans perte de qualite. 

• La fonction dite entrelacee permet un affichage rapide d'images qui deviennent progressivement de plus en 
plus nettes. 

• La possibility, sous la specification GIF89a, de definir une des 256 couleurs comme etant transparente. A 
I'affichage apparaissent alors les elements qui sont places sous le graphique aux endroits ou I'image est 
transparente. 

• Les images sont facilement editables et modifiables vu le nombre limite de couleurs. 

• Seul format qui permette de construire des animations, sortes de petits dessins animes, avec ce qu'on appelle 
les GIFS animes. 

• Le format GIF fait I'objet d'un brevet detenu par UNISYS. 



Conclusion 

En raison de sa limitation a 256 couleurs, le format GIF n'est pas du tout approprie aux graphiques a haute resolution 
comme les photos, les images nuancees et les degrades. Par contre, il excelle encore pour les petits logos, boutons, 
puces, barres, symboles, et autres cliparts frequents pour certains graphiques du Web qui ne necessitent pas une 
palette de couleurs tres etendue. II est cependant de plus en plus supplante par le format PNG. 

Le format JPEG 

Le format JPEG figure pour Joint Photographic Expert Group, done non pas pour le nom du format graphique mais pour le 
nom de la corporation qui a developpe ce format. C'est le type de format le plus repandu dans I'univers de la photo 
numerique. 

Caracteristiques 

• Le format JPEG permet de sauvegarder jusqu'a 16,7 millions de couleurs par image. 

• Son taux de compression est efficace en ce qui concerne la tail le resultante. 

• II permet de faire varier le taux de compression selon les besoins du concepteur. Une compression de 15 a 20 
% fournira une image de qualite satisfaisante pour une taille de fichier reduite. 

• Revers de la medaille, il y a une perte de qualite en fonction du taux de compression. Plus le facteur de 
compression est eleve, plus la qualite de I'image est mauvaise. C'est done une compression destructive. 



© ENI Editions - All rights reserved - Algeria Educ 



- 1- 



• Des deformations (artifacts ou artefacts) apparaissent souvent dans les passages de couleurs tranches, done 
sur les coins et les bords des objets. 

• Depuis quelques annees, la fonction entrelacee est implementee, ce qui permet un affichage progressif et plus 
rapide sur le Web. 

• Le format JPEG n'offre pas de possibility de transparence ni d'animations. 
Conclusion 

• Le JPEG est un excellent format pour les photos, specialement celles ou il y a des tonalites diverses et des 
degrades de couleurs. Mais il n'est pas exempt de defauts avec ses pertes de donnees et ses deformations. 

• A cause des pertes de donnees et des deformations, il est imperatif de respecter la regie de sauvegarder 
I'image originale et de travailler uniquement sur des copies de celle-ci. 

Le format PNG 

Le format PNG, pour Portable Network Graphic, est presente comme le format du futur. II s'agit d'un format graphique 
congu specialement pour la mise en ceuvre sur le Web. La recommandation du W3C concernant le PNG remonte a 1996. 
Le PNG doit theoriquement rassembler tous les avantages de GIF et du JPEG. II commence a etre largement retenu par 
les concepteurs d'applications Web. 

Caracteristiques 

• Le format PNG soutient 16,7 millions de couleurs comme le format JPEG. 

• Le format PNG est une specification concue specialement pour Internet et est I'objet d'une recommandation du 
W3C. 

• Sa compression est performante. Le taux de compression du format PNG est de 5 % a 25 % superieur a celui 
du format GIF. 

• Cette compression s'effectue sans pertes de donnees et de qualite. 

• II permet la transparence jusqu'a 256 couleurs. 

• Le format PNG est un format ouvert et n'est pas brevete. 
■ Sa fonction entrelacee permet un affichage progressif. 

• II ne peut generer des images animees. 

Conclusion 

Le format PNG est appele a etre de plus en plus utilise a I'avenir car il represente un excellent compromis entre le 
format GIF et JPEG. Les professionnels I'adoptent largement en lieu et place du GIF et pour les petites photos. 

Le format WebP 

Le WebP est un nouveau format d'image qui risque de prendre de I'importance dans les prochaines annees. Ce format 
est developpe par Google a partir d'un des formats de la nouvelle balise <video> du Html5 (le WebM). Selon les 
premiers essais, le WebP reduirait la taille des fichiers de 39 % par rapport aux formats JPEG, PNG et GIF, sans perte 
de qualite perceptible. 

Le poids des photos 

II semble illusoire de charger directement une photo de votre appareil photo numerique sur un site. Certaines "pesent" 
jusqu'a 4 Mo, ce qui, meme avec une connexion rapide, prendra un temps certain de chargement. 

On peut conseiller : 
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• De recadrer les images pour ne recueillir que ce qui est utile. 

• De redimensionner cette image recadree. 

• D'adopter un taux de compression d'environ 15 a 20 % pour les images JPEG. La perte de qualite n'est 
quasiment pas perceptible a I 'ce il normal. 

• De diminuer le nombre de couleurs de I'image, si I'operation s'y prete. 

Ces differentes manipulations devraient ramener la taille du fichier a une dimension beaucoup plus raisonnable et 
ameliorer sensiblement le temps de telechargement. 
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L'insertion d'une image 



L'insertion d'une image est obtenue par la balise : 

<img src="adresse du fichier image"> 

La balise <img> est une balise unique qui ne comporte pas de balise de fermeture. La notation Xhtml 1.0 <img 

src="adresse du f ichier_image" /> est auSSi acceptee en Html5. 

En Html5, la balise image <img> ne comporte qu'un seul attribut obligatoire : 

L'attribut src="adresse du fichier image". En Html, I'image n'est pas directement incluse dans le document mais 
provient d'un fichier externe, appele par l'attribut src. Celui-ci precise I'adresse relative ou absolue du fichier image qui 
doit etre affiche dans la page. 

Ainsi, pour une image situee dans le meme repertoire que la page Html (adressage relatif), on ecrira : 

<img src="image .png"> 

ou 

<img src="image .png" /> 

Pour une image situee sur un site du Web (adressage absolu), on ecrira : 

<img src="http : / / www . html 5 . com/ images/ image . png"> 

ou 

<img src=http :/ /www . html5 . com/images /image . png /> 

Les regies d'adressage sont identiques a celles abordees au chapitre "Les liens". 
Les attributs facultatifs de la balise image sont : 

• Les attributs height et width. Ces attributs permettent de definir en pixels, respectivement la hauteur et la 
largeur de I'image a I'ecran. La definition de ces attributs permet au navigateur de reserver un emplacement 
pour I'image avant son telechargement complet, tout en lui permettant de continuer la composition de la page 
et a afficher le texte de celle-ci. En definissant la dimension de I'image, le chargement est accelere et donne 
matiere a patienter aux internautes impatients. Bien que facultatifs, ces attributs sont consideres comme 
essentiels par les concepteurs professionnels. 

Si le fichier n'est pas disponible ou si I'adressage est errone, une icone sera affichee en lieu et place de I'image 
souhaitee. 

• L'attribut ait="texte associe". Cet attribut contient une breve description de I'image. Ce texte est surtout 
prevu pour les personnes non voyantes car il sera lu par les interfaces vocales. Plus recemment encore, le 
contenu de l'attribut alt est aussi utilise par les moteurs de recherche (dont Google) pour le referencement et 
le classement d'un site ainsi que pour alimenter leur banque d'images. 

Obligatoire en Html 4.0 et en Xhtml 1.0, est (re)devenu facultatif en Html5. Ce caractere facultatif alimente de 
nombreuses reactions, discussions et controverses dans les forums specialises. Rappelons que la 
recommandation Html5 n'est pas encore definitive au moment de I'ecriture de cet ouvrage. 

Les attributs de presentation align, border, hspace et vspace, deja deprecies (deprecated) en Html 4.0, ne sont plus 
repris dans le Html5. II faudra faire appel a des feuilles de style CSS pour remplacer ces attributs disparus. 

Pour les specialistes du Html, signalons egalement que l'attribut longdesc qui permettait d'ajouter une description 
detaillee a I'attention des syntheses vocales a egalement disparu. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 
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<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<img src="globe . jpg" width="120" height="120" alt="Globe terrestre"> 



</body> 
</html> 




Htm 15 




C O file:///C:/Users/Van5 ft ^ 




L'image globe.jpg est disponible dans I'espace de telechargement. 
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L'insertion d'un lien sur une image 



Les liens a partir d'une image se realisent simplement en entourant celle-ci par la balise de lien <a> ... </a>. 

Certains navigateurs continuent a entourer cette image d'une bordure (inesthetique) pour signaler le lien. Internet 
Explorer 8 et 9 ainsi que Firefox 3.6 perpetuent cette fagon de proceder. Les autres navigateurs de notre etude 
(Firefox 4, Opera 10, Safari 5 et Chrome 7) n'ajoutent plus cette bordure. 



® Htm 15 - Mozilla Firefox 


1=1 


1 s 


Fichier Edition Affichage Historique Marque-pages 
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file ft T | 
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— 




1 










Termine 









Pour enlever cette bordure, il faut passer en Html5 par une declaration de style. Dans I'attente de I'etude detaillee des 
feuilles de style, il suffit d'ajouter a la balise <img> la declaration styie="border : none; ". 

Le code complet devient : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<a> 

<img src="globe . jpg" width="120" height="120" alt="Globe 

terrestre" style="border : none; "> 

</a> 

</body> 

</html> 
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L'insertion d'une couleur d'arriere-plan 



Depuis la disparition de I'attribut bgcolor, il n'est plus possible d'ajouter un arriere-plan de couleur a un element. II faut 
imperativement passer par les proprieties de style CSS, background-color en I'occurrence. 



Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<style> 

body {background-color: rgb (200, 215, 230) ; } 

</style> 

<body> 

</body> 

</html> 



■ 
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Les feuilles de style relatives aux arriere-plans seront etudiees en detail dans la partie consacree aux CSS. 
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L'insertion d'une image d'arriere-plan 



L'attribut background etant declare obsolete en Html5, il 
background-image pour inserer une image d'arriere-plan. 



n'y a d'autre solution que de passer par la propriete de style 



Exemole 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859- 


-1"> 


</head> 




<style> 




body {background-image: 


url ( ' bg . gif ' ) ; } 


</style> 




<body> 




</body> 




</html> 





Fichier Edition Affichage Historique Marque-pages 
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Les images reactives 



1. Notion 



Les images reactives permettent d'effectuer des liens distincts en fonction d'une partie d'image ou d'une zone (area) 
predefinie de celle-ci. Ainsi, par exemple, sur une carte de la France, on peut imaginer qu'un die sur celle-ci menerait 
le visiteur vers un fichier avec le nom et les informations du departement concerne. 

II faut signaler que I'emploi des images reactives devient de plus en plus rare dans les applications Web actuelles. 
Les problemes qu'elles posent pour un referencement efficace par les moteurs de recherche y sont pour beaucoup. 



On prend une image. 



fflL 



I 



Pour chaque zone retenue (ici un cube), on va associer un fichier. 



b.htm ■ 
d.htrn- 



I ► a.htj 



htrn 
c.htm 
» f.htm 



e.htrn 



Pour ce faire, on va definir des zones dans I'image, un peu comme avec une carte de geographie (map en anglais) et 
associer a chacune de ces zones un fichier Html. 




On obtient ainsi une image reactive, dite aussi "mapee", car el le est decoupee en zones a I'instar des cartes 
geographiques. On appellera la carte (map), les balises Html qui reprennent a la fois les zones de I'image et les 
fichiers associes. 

II existe plusieurs methodes pour realiser cet effet d'images reactives : les methodes NCSA, CERN et CSIM. La 
methode CSIM (Client Side Image Map) est de loin la plus utilisee a I'heure actuelle car el le fait partie a part entiere du 
langage Html. Avec cette methode, les fichiers de la carte sont inclus dans la page Html et ne necessitent pas I'appel 
a des ressources additionnelles cote-serveur pour realiser leurs fonctions. C'est cette methode que nous utiliserons. 



2. Les balises et attributs 

Les balises des images reactives peuvent sembler tres hermetiques pour I'utilisateur moyen. Cependant, une fois 
decodees, elles determinent, en peu d'elements, tout ce dont le navigateur a besoin pour les traiter. 

La balise de I'image reactive 
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<img sr c=" f ichier_image " usemap="#nom_de_la_carte"> 

En fait, on ajoute simplement a la balise classique de I'image I'attribut usemap pour avertir le navigateur qu'il doit 
employer pour celle-ci une carte (usemap) et le nom de la carte en question. Cette carte sera alors incluse 
directement dans le fichier, un peu comme une ancre de lien. Le code reprend d'ailleurs la notation avec le diese #, 
propre aux ancres. 

Les balises de la carte 

Pour rappel, la carte (map) est decoupee en zones (area). 
<map> 

<map id="nom_de_la_carte"> 

<area shape=" forme" coords="coordonnees" href="destination"> 

. . . autres balises area . . . 

</map> 

Reprenons les elements un par un : 

• La balise <map id="nom_de_la_carte"> ... </map>. 

On donne un nom a la carte (map) par I'identifiant id et c'est ce nom qui sera retenu dans I'attribut usemap, vu 
quelques lignes plus haut. 

• La balise <area shape=" forme " coords="coordonnees" href="destination">. 
<area> 

Cette balise determine les zones reactives de I'image. 

• L'attribut shape de <area> 

L'attribut shape="forme" determine la forme de la zone : 

• rect pour un rectangle. 

• circle pour un cercle. 

• polygon pour un polygone irregulier. 

• default pour gerer les dies effectues en dehors d'une des zones reactives. 

• L'attribut coords de <area> 

L'attribut coords="coordonnees" note les coordonnees qui permettront au navigateur de reconstituer la forme 
geometrique. 

Nous detaillons ci-apres la fagon, specifique a chaque methode, de noter ces coordonnees. La veritable 
difficulte pour le webmestre est de trouver les coordonnees des points dans I'image. C'est ici qu'une 
application de traitement de I'image, comme Adobe Photoshop ou Gimp, se revele utile. 

Pour un rectangle : coords="x, y, x' , y' ". 





y 


St 
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Pour un cercle : coords="x, y, r" soit le point central et le rayon. 




Pour un polygone : coords="xl,yl,x2,y2,x3,y3,x4,y4" et ce pour autant de points qu'il y a de sommets dans 
le polygone. 




x4,y4 



• L'attribut href de <area> 

L'attribut href="destination" specifie le fichier associe a la zone selectionnee. L'adressage se fait de la fagon 
tout a fait classique en Html. Facultatif si le concepteur souhaite qu'un die sur une zone n'entraine aucune 
action. 

• L'attribut alt de <area> 

L'attribut ait="commentaire" (facultatif en Html5) permet d'ajouter une illustration textuelle. 



3. Un exemple complet 

Soit le fichier Html5 suivant : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<P> 

<img src="cubes.gif" height="121" width="136" alt=""> 

</p> 

</body> 

</html> 



Et la carte nommee "cartons" de I'image "cubes.gif" : 



<map id=" cartons " > 



<area 


shape= 


'rect" 


coords= 


'37,9,72,40" href="a.htm" alt="" 


> 


<area 


shape= 


'rect" 


coords= 


'18,46,47,79" href="b.htm" alt=" 


"> 


<area 


shape= 


'rect" 


coords= 


'61,43,93,78" href="c.htm" alt=" 


"> 


<area 


shape= 


'rect" 


coords= 


'9,84,36,119" href="d.htm" alt=" 


"> 


<area 


shape= 


'rect" 


coords= 


'48,85,77,116" href="e.htm" alt= 


" "> 


<area 


shape= 


'rect" 


coords= 


'89,81,123,115" href="f.htm" alt 


= " " > 



</map> 
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b.htm + 



d.htm 




a. htm 



+ c.htm 



f.htm 



e. 



htm 



Incluons la carte (map) dans le fichier Html5 pour creer I'image reactive. 
Cette inclusion se realise en deux temps : 

On ajoute d'abord I'information pour le navigateur usemap="#cartons" dans la balise de I'image. 
On inclut ensuite la carte n'importe ou dans le fichier Html5. 
Le fichier final devient : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<P> 

<img src="cubes . gif " usemap="#cartons" height="121" width="136" 
alt=" "> 

</p> 

<map id="cartons"> 

<area shape="rect" coords="37, 9, 72, 40" href="a.htm" alt=""> 
<area shape="rect" coords="18, 46, 47, 79" href="b.htm" alt=""> 
<area shape="rect" coords=" 61 , 43, 93, 78 " href="c.htm" alt=""> 
<area shape="rect" coords=" 9, 84 , 3 6, 119" href="d.htm" alt=""> 
<area shape="rect" coords="48, 85, 77, 116" href="e.htm" alt=""> 
<area shape="rect" coords="89, 81, 123, 115" href="f.htm" alt=""> 
</map> 
</body> 
</html> 



L'image et les fichiers sont disponibles dans I'espace de telechargement. 



4. Les logiciels disponibles 

Les editeurs Html evolues, comme par exemple Dreamweaver, disposent de fonctions pour realiser directement ces 
images reactives. 

Pour ceux qui preferent encoder manuellement, il existe quelques applications qui peuvent aider a les realiser. Citons 
MapThis, que vous pouvez telecharger a I'adresse www.lehtml.com/htmlplus/mapthis.htm. Ce logiciel est freeware, en 
anglais, efficace mais son look devient desuet. Retenons Xmap, un freeware egalement en anglais mais assez intuitif. 
II peut etre telecharge a I'adresse www.carlosag.net/Tools/XMap/. 

■ Ouvrons I'application. 

Commengons par charger I'image (Load image) grace au menu a I'extreme gauche de la fenetre. Nous avons retenu 
I'image map.png disponible dans I'espace de telechargement. 
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E X-Map. 

File Edit Options Help 
Image: 



ToolBox 



I^Load Image... 
r~|Rectfelel-|gt5pot 
^iDncle Hat Spot 
j Polygon HotSpot 





s I airsT^i^i XI - 



3 




■ Appliquons une zone reactive a chaque panneau. 

Dans le meme menu, retenons I'option rectangle (Rectangle HotSpot) et positionnons le rectangle sur le panneau 
superieur gauche. 



i>£ X-Map, 
File Edit Options Help 
Image: 



ToolBox; 



(r^ Load Image... 
rl Rectangle HotSpot 



O Circle HotBot 
j Polygon HotSpot 




Remarquons la boite de proprietes (Properties) a I'extreme droite de votre ecran. Elle nous permettra de determiner 
le fichier cible de la zone en precisant son attribut HREF. 



Properties: 


fsiT A 1 1 
(SI: Z + | 


□ Divers 


±. 


Access Key 






.Alt 




Class 




Coords 


0.0.90.90 


Cir 




|HREF 


a .htm 


■ id 




1 NoHref 


False 



© ENI Editions - All rights reserved - Algeria Educ 



- 5- 




■ Et ensuite les panneaux suivants. 



Le code de I'image reactive est genere au fur et a mesure des manipulations dans la sous-fenetre au bas de 
I'application. 



<html> 



<head> 

<tiElt>Ijnage Map Sarapl*-<:/ tinier 
</head> 
<body> 

<map name- 1 map 1 > 



<area shape^rect' coords =, O p 0, 90,90" hxef^a.htnt' /> 

<area ahape-'recc 1 coords" *0, 94, 90, 194 1 href-'b.hcm 1 /> 

<area 3hape='rect 1 coords=* 94,0, 1B0, 90 1 href= 1 c. titm' /> 

<area aSape-'rect 1 caords=* 94, 94, 160, 164 ' href"' d. htm* /> 



</map> 

</bady> 
</html> 



Le code complet devient 



<!D0CTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<P> 

<img src="map . png" usemap="#map" height="135" width="135" alt=""> 
</p> 

<map name=' map' > 

<area shape='rect' coords=' 0, 0, 90, 90' href =' a . htm' > 

<area shape='rect' coords=' 0, 94, 90, 184' href =' b . htm' > 

<area shape='rect' coords=' 94, 0, 180, 90' href =' c . htm' > 

<area shape='rect' coords=' 94, 94, 180, 184' href=' d. htm' > 

</map> 

</body> 

</html> 
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Preambule 



II est souvent difficile de percevoir le pourquoi du comment de ces balises dites semantiques. Surtout que leur 
implementation ne repond en rien a la definition academique de la semantique comme relation entre le signifie et le 
signifiant. 

Ces balises semantiques decrivent la nature de certains elements du contenu d'une page. Ces derniers pourront ainsi 
etre plus facilement recuperes et reutilises par des programmes automates, soit des moteurs de recherche. 



Exemole 



La nouvelle balise semantique ou d'organisation de la page <nav> ... </nav> indique simplement que son contenu est 
un menu de navigation. 



<nav> 

<a href="#">Accueil</a> I 
<a href="#.htm">Item K/a> I 
<a href="#.htm">Item 2</a> I 
<a href="#.htm">Item 3</a> I 
<a href="#.htm">Contact</a> 
</nav> 



II est d'autant plus difficile a en comprendre I'utilite que ces balises Html n'ont aucune influence sur la structure du 
contenu et bien souvent aucune influence sur la presentation et I'affichage de la page. 

Ce concept du Web semantique est une idee maitresse de Tim Berners-Lee (I'inventeur du Web) qui le defend avec 
conviction depuis de nombreuses annees. 
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Les anciennes balises semantiques 

Le Html5 a herite des anciennes balises semantiques du Html 4.0. Ces balises possedent une mise en forme qui leur 
est specifique. 

Ces balises semantiques sont : 

• <abbr> ... </abbr> qui signale une abreviation, par exemple SARL ou TVA. Outre sa fonction semantique, cette 
balise signale aux syntheses vocales de ne pas tenter de lire le mot tel qu'il se presente mais de I'epeler. 

• <acronym> ... </acronym> qui signale un acronyme, soit un mot forme d'initiales ou de syllabes de plusieurs mots 
comme ONU pour Organisation des Nations Unies, n'est plus reprise par le Html5. On utilisera la balise <abbr>. 

• <address> ... </address> qui affiche une adresse de contact. Son contenu est affiche par defaut en italique et 
en petits caracteres. Precisons qu'aucun lien vers cette adresse n'est effectue par cette balise. 

• <cite> ... </cite> qui affiche une citation. Par defaut cette citation est affichee en italique. 

• <code> ... </code> qui signale une syntaxe ou du code informatique. Par defaut, son contenu est affiche dans 
une police a espacement fixe. 

• <samp> ... </samp> qui met en evidence un texte d'exemple. Par defaut, son contenu est affiche dans une police 
a espacement fixe. 

• <dfn> ... </dfn> qui donne la definition d'un terme. Par defaut, cette definition est affichee en italique. 

• <kbd> ... </kbd> qui indique a I'utilisateur les saisies au clavier a effectuer. Par defaut, son contenu est affiche 
dans une police a espacement fixe. 

• <var> ... <var> qui contient une variable. Par defaut, le texte de la variable est represents dans une police 
italique. 

• <strong> ... </strong> definit un texte important. Par defaut, son contenu est affiche en gras. 

• <em> ... </em> marque un texte sur lequel on veut insister. Par defaut, son contenu est affiche en italique. 

Commentaire 

On peut donner une autre allure que la presentation par defaut en utilisant les feuilles de style. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 
non risus. Suspendisse lectus tortor, dignissim sit amet, 
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 
diam. Maecenas ligula massa, varius a, semper congue, euismod non, 
mi . </p> 
<address> 

Ecrit par Untel</b> 

<a href ="mailto : untel@exemple . org" >Contact mail</a><br> 

Addresse : BP 58 Ailleurs<br> 

Telephone : 01 30 79 79 30 

</address> 

</body> 
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Fichier Edition Pre:entation Historique Favorii Fenetre 



+ P> file:///C:/Users/Vi &\ \ Qs Goalie 



» 



Lorem ipsum dolor sit amet. consectetuer adtpiscing elit. 
Sed non risus. Suspendisse lectus tortor : dignissim sit atnet 
adtpiscing nec = ultricies seel dolor. 

Ecrit par Untel 
Contact mail 
Addresse : BP SSAillsurs 
Telephone : 01 30 79 79 30 
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Les nouvelles balises d'organisation 



Ces balises d'organisation sont plutot destinees au concepteur de la page afin qu'il puisse distinguer plus aisement 
des portions de code. 



1. Les balises <header>, <nav>, <footer> et <aside> 

Si Ton effectue une synthese des pages existantes sur la toile, on peut constater qu'elles comportent la plupart du 
temps, en totalite ou en partie, les elements suivants : 

• Un en-tete de page avec, par exemple, un logo, une banniere, le nom du site, un slogan ou un champ de 
recherche. 

• Les outils de navigation, precieux et indispensables pour la consultation des differentes parties du site. 

• Une partie consacree au contenu. 

• Une zone annexe qui permet d'apporter des elements accessoires au contenu proprement dit, comme une 
publicite. 

• Un pied de page avec par exemple la mention d'un copyright, le plan du site, les mentions legales, les regies 
d'accessibilite, etc. 

Ce qui visuellement peut prendre les formes suivantes : 



En-tete de page 



... 



j 




r 




Navigation 



Contenu 




Pied de page 



Ou encore : 
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r 

- 


En-tete de page 








Navigation 


J 



Contenu 



Pied de page 



Ou encore 



En-tete de page 



Navigation 



Contenu 



r 



A part 



Pied de page 



L'idee du Html5 a ete de creer de nouvelles balises pour permettre d'identifier plus clairement et plus rapidement ces 
grandes parties du design de la page. Ainsi : 

• <header> ... </header> regroupe les elements de I 'en-tete de la page. Cette balise peut remplacer utilement 
les <div id="header"> que I'on rencontre frequemment. 

• <nav> ... </nav> indique les elements d'un menu de navigation. 

• <footer> ... </footer> signale les elements de pied de page. Cette balise peut remplacer utilement les <div 
id="footer"> que I'on rencontre frequemment. 



• <aside> ... </aside> avertit qu'il s'agit d'elements annexes au contenu . 
Prenons un exemple de code : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
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<meta charset="iso-8859-l"> 

</head> 

<body> 

<img src="logo .png"> 
<hl>Nom du site</hl> 

<form act ion="http : / /www .google . com/ search" > 
<input type="text" size="15" value=""> 
<input type=" submit " value="Rechercher"> 
</f orm> 
<div> 

<a href =" index . htm" >Accueil</a> 
<a href="iteml .htm">Item K/a> I 
<a href="item2 .htm">Item 2</a> I 
<a href =" item3 . htm" > Item 3</a> I 
<a href="item4 .htm">Item 4</a> | 
<a href="contact . htm">Contact</a> 
</div> 

<h2>Nom de la page</h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit . Sed 
non risus. Suspendisse lectus tortor, dignissim sit amet, 
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 
diam. </p> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 
non risus. Suspendisse lectus tortor, dignissim sit amet, 
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 
diam. </p> 
<hr> 

<p>Copyright 201x</p> 

</body> 

</html> 



Soit une page assez commune avec : 

• Un logo. 

• Le nom du site. 

• Un formulaire de recherche. 

• Des liens de navigation dans le site. 

• Le titre de la page. 

• Du contenu. 

• Une ligne horizontale. 

• Une mention de copyright. 
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Fichier Edition Affichage Historique Marque-pages Outils 



htm 1 5 



JQ 

, - [ej \jtj [ D file:///! ft T 1 SeaP] | Mag 



Logo 



Nom du site 



Recherchef 



Accueil | Item 1 | hem 2 | Item 3 | Item 4 | Contact 

Nom de la page 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Sed non risus. Suspendisse lectus tortor, dignissim sit... 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Sed non risus. Suspendisse lectus tortor, dignissim sit... 



Copyright 20 lx 



Ce code est correct, c'est meme du Html5 tout a fait valide, mais rien n'est incorpore pour organiser la page et en 
distinguer des elements majeurs comme le code relatif a I'en-tete, aux menus de navigation et du pied de page. 
Cette information est apportee par les nouvelles balises Html5 <header>, <nav> et <footer>. 

Avec les nouvelles balises d'organisation du Html5, ce code pourrait prendre I'allure suivante : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<header> 

<img src="logo .png"> 
<hl>Nom du site</hl> 

<f orm action="http : / /www .google . com/ search "> 

<input type="text" size="15" value=""> 

<input type=" submit " value="Rechercher"> 

</f orm> 

</header> 

<nav> 

<a href =" index . htm" >Accueil</a> 
<a href="iteml .htm">Item K/a> I 
<a href="item2 .htm">Item 2</a> I 
<a href="item3 .htm">Item 3</a> 
<a href="item4 .htm">Item 4</a> I 
<a href="contact . htm">Contact</a> 
</nav> 

<h2>Nom de la page</h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 
non risus. Suspendisse lectus tortor, dignissim sit amet, 
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 
diam. </p> 
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<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit . Sed 

non risus. Suspendisse lectus tortor, dignissim sit amet, 

adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 

diam. </p> 

<footer> 

<hr> 

<p>Copyr ight 201x</p> 
</footer> 

</body> 
</html> 



Le code apparait ainsi plus lisible et Ton peut distinguer du premier coup d'oeil les elements de code relatifs a I'en-tete 
de la page, aux outils de navigation et au pied de page. 

Voila la seule et unique fonction de ces nouvelles balises Html5. II ne faut pas leur chercher des fonctions de mise en 
page ou de presentation. El les ne servent qu'a organiser la page et a rendre la lecture du code plus aisee 
principalement pour le concepteur. 

La capture d'ecran est par ailleurs totalement identique a la precedente. 

C'est a I'auteur d'associer eventuellement des feuilles de style CSS a ces balises pour en assurer la presentation. 



2. Les balises <section> et <article> 

Le contenu principal peut a son tour etre organise en diverses parties : 

• La balise <section> determine une partie du contenu de la page se rapportant a un theme determine. 

• La balise <articie> definit un contenu independant du document qui possede une identite a part entiere 
dans la page comme I'article d'un blog, un post dans un forum ou un produit dans un site commercial. 



Prenons comme exemple un blog avec differents sujets abordes a chaque entree journaliere. 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




</head> 




<body> 




<hl>Jour K/hl> 




<h2>Sujet K/h2> 




<div>Presentation du sujet K/div> 




<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 


Sed 


non risus. Suspendisse lectus tortor, dignissim sit amet, 




adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 




diam. </p> 




<h2>Sujet 2</h2> 




<div>Presentation du sujet 2</div> 




<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 


Sed 


non risus. Suspendisse lectus tortor, dignissim sit amet, 




adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 




diam. </p> 




<hr> 




<hl>Jour 2</hl> 




<h2>Sujet K/h2> 




<div>Presentation du sujet K/div> 




<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 


Sed 


non risus. Suspendisse lectus tortor, dignissim sit amet, 




adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 




diam. </p> 




</body> 




</html> 





Ce qui s'affiche comme suit dans le navigateur : 
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| □ Htm 1 5 

..<fy*_ ' [CJ GB I □ fii « & - 1 [D'SbP] I Reag.r • 



Htm 15 - Moiilla Firefox4,0 
Fichier Edition Affichage Historique Marque-pages Outils 



Jour 1 

Sujet 1 

Presentation du sujet 1 

Lorem ipsum dolor sit amet, conaectetuer adipiscing eJ.it. Sed non risua. 
Suapendisae lectus tortor... 

Sujet 2 

Presentation du sujet 2 

Lorem ipsum dolor ait amet, consectetuer adipiscing elrt. Sed non risus. 
Suapendisae lectus tortor... 

Jour 2 

Sujet 1 

Presentation du sujet 1 

Lorem ipsum dolor ait amst, conaectetuer adipiscing elit. Bed non risua. 
Suapendisae lectus tortor... 



J 



Appliquons des balises <section> et <article>. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<section> 

<hl>Jour Khl> 

<article> 

<h2>Sujet K/h2> 

<div>Presentation du sujet K/div> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 

non risus. Suspendisse lectus tortor, dignissim sit amet, 

adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 

diam. </p> 

</article> 

<article> 

<h2>Sujet 2</h2> 

<div>Presentation du sujet 2</div> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 

non risus. Suspendisse lectus tortor, dignissim sit amet, 

adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 

diam. </p> 

</article> 

<hr> 

</section> 
<section> 

<hl>Jour 2<hl> 
<article> 

<h2>Sujet K/h2 
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<div>Presentation du sujet K/div> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit . Sed 

non risus. Suspendisse lectus tortor, dignissim sit amet, 

adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 

diam. </p> 

</article> 

<hr> 

</section> 

</body> 
</html> 



Cette organisation du code peut se visualiser ainsi : 



Organisons maintenant une page complete avec les balises <header>, <nav>, <footer>, <aside>, <section> et 
<article>. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<header> 

<img src="logo .png"> 
<span>Nom du site</span> 
</header> 
<nav> 

<ul> 

<li><a href =" ">Accueil</a></li> 
<li><a href="">Item K/aX/li> 
<li><a href="">Item 2</a></li> 
<lixa href="">Item 3</a></li> 
<lixa href =" ">Contact</a></li> 
</ul> 
</nav> 
<section> 

<hl>Sujet de la page</hl> 
<article> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 




Section 




3. Un exemple general 
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non risus. Suspendisse lectus tortor, dignissim sit amet, 

adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 

diam.Lorem ipsum dolor sit amet, consectetuer adipiscing 

elit . . . </p> 

</article> 

</section> 

<aside> 

<h3>Archives</h3> 
<ul> 

<li><a href="">Aout 201x</a></li> 

<li><a href =" ">Juillet 201x</a></li> 

<li><a href="">Juin 201x</a></li> 

<li><a href="">Mai 201x</a></li> 

</ul> 

</aside> 

</body> 

</html> 



Le tout agremente de quelques feuilles de style peut donner, par exemple, le resultat suivant 



(§) Htm 15 - Mozilla Firefox4.0 I '=■ II B it^j : 

Fichier Edition Affichage Historique Marque- pages Outils ? 

" nm ~ " - - - 



□ HtmIS 




j» j- | C 1 j it | U fiW/ZQ/Users/Van "£? - \ | □ - Search P | Reagif 



Nom du site 
Sujet de la page 

Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Sed non risus. Suspendisse 
lectus tortor dignissim sit amet, adipiscing 
nec : ultricies sed : dolor. Cras elementum 
ultrices diam.Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 



Accueil 
Item 1 
Item 2 
Item 3 
Contact 



Archives 

Aout 20 Ix 
Juillet201x 
Juki 20 lx 
Mai 20 lx 



J 



La ou cela se complique, c'est que rien n'interdit de mettre des <nav> dans des <footer>, des <header> dans des 
<section>, des <header> dans des <articie>. Comme ces balises sont nouvelles et emblematiques du Html5, certains 
auteurs en usent et en abusent. 

L'exemple suivant tente d'illustrer que I'usage intensif de ces balises d'organisation risque finalement de plus 
embrouiller le code que de I'organiser... 



<section> 
<header> 

<hl>Les animaux de 1' arctique</hl> 

</header> 

<article> 

<header> 

<h3>L'ours polaire</h3> 
</header> 

<p>L'ours blanc ou ours polaire (Ursus maritimus) est un grand 
mammifere carnivore originaire des regions arctiques. C'est, avec 
l'ours kodiak, le plus grand des carnivores terrestres et il 
figure au sommet de sa pyramide alimentaire . </p> 
<footer> 

Source : Wikipedia 
</footer> 
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</article> 

<article> 

<header> 

<h3>Les phoques</h3> 
</header> 

<p>On rencontre communement six especes de phoques dans les eaux 
canadiennes : le Phoque commun (Phoca vitulina) , le Phoque annele 
(P. hispida) , le Phoque du Groenland (P. groenlandica) , le Phoque 
barbu (Erignathus barbatus), le Phoque a capuchon (Cystophora 
cristata) et le Phoque gris (Halichoerus grypus).</p> 
<footer> 

Auteur : IAN MCTAGGART-COWAN 

Source : L' encyclopedic canadienne 

</footer> 

</article> 

<footer> 

Compilation d' articles 

</footer> 

</section> 



Pour que ces balises d'organisation atteignent leur objectif, elles doivent done etre utilisees avec moderation. 
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De nouvelles balises semantiques 



Le Html5 introduit egalement une foule de nouvelles balises semantiques. 
La balise <hgroup> 

Cette balise <hgroup> est destinee a contenir un groupe de balises <hx> (au moins deux). El le est une forme derivee de 
la balise <header>. 

<hgroup> 

<hl>Titre de 1' article</hl> 
<h2>Sous-titre de 1' article</h2> 
</hgroup> 

La balise <time> 

La balise <time> definit une date et/ou une heure. L'attribut facultatif datetime indique la date et I'heure selon la 
representation numerique internationale de la norme ISO8601. 

<time>Demain</time> est un autre jour. 

<time datetime="2012-10-05">Le 5 octobre</time> 

<time datetime="2012-04-13TOO : 19 : 00+02 : 00">Samedi 13 mars a 19h</time> 



La balise <mark> 

La balise <mark> met en evidence une partie du texte. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<mark>Html5</mark> a remplace le Html 4.0. 

</body> 

</html> 



Le contenu de cette balise devrait etre surligne sur fond jaune, a I'identique des resultats de recherche dans les 
navigateurs. 

A ce jour, seules les versions recentes de Google Chrome et de Firefox interpretent cette balise <mark>. 




Q Html5 

O Qfile:///C:/Users/Van%<fr ^ 



Le H tml 5 a remplace le Html 4.0. 



La balise <meter> 

La balise <meter> definit une mesure. Utilisee uniquement pour les mesures avec un minimum connu et une valeur 
maximale. 



Cette balise possede six attributs : 
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- value : la valeur de cette donnee sur I'echelle. 

- min : le minimum possible. 

- low : le minimum atteint. 

- high : le maximum atteint. 

- max : le maximum possible. 

- optimum : le maximum ideal. 

A ce jour, seul Google Chrome interprete cette balise par une jauge du plus bel effet. 
Exemole 

<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<p>Votre score est de 

<meter value="14" min="0" max="20" low="8" high="18" 

optimum=" 1 9 . 5 " ></meter> sur 20. 

</body> 

</html> 



Q Htm 15 




<- O O file:///C:/Users/Van% ft i ^ 



Votre score est de sur 20. 



La balise <figure> 

La balise <figure> peut etre utilisee pour regrouper des elements tels que des images, des videos ou meme du texte 
qui viennent en illustration du contenu principal. 

La balise <f igcaption>, utilisee conjointement a la balise <figure>, fournit une legende aux elements ainsi regroupes. 



Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<h3>Les eoliennes</h3> 

<p>Une eolienne est une machine utilisant la force motrice du 
vent. Cette force peut etre utilisee mecaniquement (dans le cas 
d' une eolienne de pompage) , ou pour produire de 1' electricite 
(dans le cas d'un aerogenerateur) [Source Wikipedia] . </p> 
<f igure> 

<img src="eolel . jpg" alt=""> 

<img src="eole2 . jpg" alt=""> 

<f igcaption>Quelques eoliennes</ f igcaption> 

</f igure> 

</body> 
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</html> 
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Une eolienne est une machine uulisant la force motrice clu vent. 
Cette force peut etre utilisee meeaniquement (dans le cas d'une 
eolierme de pompage) : ou pour produire de 1'electricite (dans le 
cas d'un aerogenerateur) [Source Wikipedia]. 




Quelques eoliennes 



Les balises <details> et <summary> 

La balise <detaiis> definit des details ou un contenu accessoire. La balise <summary> fournit un resume de ces 
elements accessoires. 

Exemple 



<details> 

<summary>Plus d' informations . . .</ summary) 

<p>Voici les reactions de nos lecteurs concernant le 

developpement . . . </p> 

</details> 



Aucun navigateur ne reconnait encore ces balises <detaiis> et <summary>. Pourtant les perspectives sont 
interessantes car selon les specifications du W3C, au die du texte specifie par la balise <summary>, le contenu de la 
balise <detaiis> devrait apparaitre a la fagon d'un menu deroulant. Et ceci de fagon native, sans faire appel a du 
JavaScript. 
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Presentation 



Les formulaires occupent une place preponderante dans la conception et I'exploitation d'une application ou un site 
Web. C'est en effet la seule fagon de recevoir en retour des informations provenant directement de I'utilisateur final, et 
en outre, structurees selon les besoins du concepteur. II suffit de penser a tous les sites a vocation commerciale pour 
lesquels ces formulaires sont indispensables. 

La preoccupation premiere des developpeurs d'application Web est de recuperer des donnees valides. Citons par 
exemple un code postal frangais avec cinq caracteres numeriques ou une adresse email dont la syntaxe est valide. Une 
des applications premieres du JavaScript a ete (et est toujours) la validation en direct (cote client) des donnees 
encodees par I'utilisateur. Ainsi, tous les formulaires d'une certaine importance comportent, outre le code Html, une 
bonne dose de JavaScript pour la validation des donnees. Une des idees majeures du Html5 est de faire prendre en 
charge par le Html (et done par les navigateurs) la validation des champs de formulaires, liberant ainsi le code source 
de scripts redondants. Et ce, meme dans le cas ou la prise en charge du JavaScript aurait ete desactivee. 

Les formulaires font partie du langage Html depuis une quinzaine d'annees et n'ont pas ete modifies depuis. II faut 
avouer que graphiquement, meme avec des ajouts de proprietes de style, une lassitude certaine s'est installee autant 
chez les designers que les usagers. En outre avec le Web 2.0, I'utilisateur s'est habitue a une presentation plus proche 
des applications logicielles que des pages Web classiques. Citons les calendriers qui sont devenus usuels dans les 
sites de reservation en ligne ou les curseurs utilises dans divers logiciels. En integrant dans le langage Html les 
specifications Xforms, le Html5 marque indeniablement les esprits en ajoutant aux formulaires herites du Html 4.0 un 
nombre impressionnant de formulaires inedits, se rapprochant de ce qui est utilise dans les applications logicielles. 
L'integration de ces nouveaux formulaires dans les navigateurs se fait helas progressivement et il faudra peut-etre 
encore attendre quelques annees avant que tous les navigateurs usuels ne les gerent completement. Mais il est 
indeniable que le Html5 ouvre en la matiere des perspectives considerables aux concepteurs et designers. 

Le but ultime des formulaires est le traitement automatise des donnees recoltees. II faut alors faire appel, cote 
serveur, a des langages de programmation et de gestion de bases de donnees comme par exemple PHP et MySQL. Un 
apprentissage qui depasse largement le cadre de cet ouvrage se revelera indispensable. On entre la dans un domaine 
reserve aux amateurs tres avertis, sinon aux professionnels. Heureusement, il existe pour les debutants le protocole 
mailto, qui permet I'envoi des donnees des formulaires a une adresse de courrier electronique. Si ce systeme presente 
I'avantage de pouvoir etre utilise par tout un chacun, sans faire appel a des ressources externes, il comporte 
neanmoins des limites certaines. En outre, le traitement ulterieur des donnees devra etre effectue manuellement. 
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La declaration de formulaire 



La balise <form> ... </form> a comme unique fonction de declarer au navigateur qu'il doit mettre en place un formulaire. 
El le englobera les elements ou champs de formulaires comme une ligne de texte, des cases a cocher, des listes 
deroulantes, etc. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<form action=""> 

Elements du formulaire 

</f orm> 

</body> 

</html> 



En soi, la balise <form> n'affiche rien dans la fenetre du navigateur. Une capture d'ecran n'a done pas de sens. 

Les attributs usuels de la balise <form> sont : 

name 

Pour attribuer un nom {name) au formulaire. 
action 

Lorsque vous donnez I'ordre au navigateur de transmettre les donnees du formulaire, il a besoin de connaitre I'action 
qu'il doit effectuer. 

Cette action sera : 

• soit I'adresse d'un programme de traitement des donnees, situe sur le serveur, en CGI, Perl, PHP, ASP... Par 
exemple, action = "http://www.serveur/traitement.php". 

• soit une adresse de courrier electronique pour recuperer simplement les donnees. Le protocole mailto est alors 

Utilise. Par exemple, action="mailto:mon_email@serveur". 

• soit, lorsque les donnees d'un formulaire sont traitees en interne (cote-client) par du JavaScript, I'attribut 
action reste vide. Par exemple action="". 

Si vous utilisez le validateur du W3C (http://validator.w3.org), la presence de I'attribut action est obligatoire. 
enctype 

L'attribut enctype specifie sous quel format informatique (mime type) seront transmises les donnees du formulaire. Par 
defaut, la valeur est appiication/x-www-form-uriencoded. Pour I'envoi de fichiers (voir la section "Les formulaires de 
transfert de fichiers" dans ce chapitre), celle-ci doit etre multipart/form-data et enfin, pour I'envoi vers une adresse 
electronique avec le protocole mailto, la valeur sera text/plain. 

method 

La transmission des donnees d'un formulaire s'effectue selon la methode GET ou la methode POST. La methode GET 
effectue le transfert en caracteres ASCII et les donnees ne peuvent exceder 100 caracteres. La methode POST gere les 
caracteres non-ASCII et une quantite de caracteres illimitee. Dans la pratique, la methode POST s'est imposee pour 
des raisons de facilite et d'efficacite. 

Lorsque les donnees du formulaire sont traitees en interne (action=""), les attributs method et enctype sont inutiles car 
il n'est pas fait appel au serveur. 

Commentaires 

• Cette balise, basique en Html, est parfaitement compatible entre les differents navigateurs. 

• La balise <form> doit obligatoirement etre fermee. En cas d'oubli de la balise de fermeture </form>, aucun 
element de votre formulaire ne sera affiche dans le navigateur. 
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La ligne de texte 

Cette ligne de texte permet d'accueillir I'encodage de donnees tant alphabetiques que numeriques. 
Exemple 

Proposons a I'utilisateur une ligne de texte pour encoder son nom. 

. . Htm 15 

Fichier Edition Presentation Hi:toiique Favoris Fenetre . 

+ |8file:///G/Users/V &' \ ] Qr Google » 



Nom : 











<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<form action=""> 

Nom : <input type="text"> 

</f orm> 

</body> 

</html> 



Commentaires 

• Cette balise, basique en Html, est parfaitement compatible entre les differents navigateurs. 

• La balise <input> n'a pas de balise de fermeture. L'ecriture <input type="text" />, inspiree du Xhtml, est 
egalement acceptee en Html5. 

Les attributs possibles sont : 
name 

Definit un nom (name) unique pour cet element. Cet attribut est utilise pour collecter le contenu de la ligne de texte lors 
de la soumission du formulaire. 

size 

Definit le nombre de caracteres visibles de la ligne de texte et, par consequent, la largeur de la zone de texte. 
L'utilisateur peut neanmoins encoder autant de caracteres qu'il souhaite meme s'ils debordent du champ de la zone 
visible. La valeur par defaut de size est de 20. 

maxlength 

Determine le nombre maximal de caracteres que I'utilisateur peut encoder dans la ligne de texte. Cet attribut est 
particulierement utile pour des donnees avec un nombre defini de caracteres comme, par exemple, cinq chiffres pour le 
code postal francais. 

value 

Definit la valeur par defaut de la ligne de texte. Celle-ci apparait dans la ligne de texte au chargement de la page. Par 
exemple, <input type="text" value="Votre nom ici ! ">. 



readonly 
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Indique que la valeur attribuee par defaut a la ligne de texte ne pourra etre modifiee par I'utilisateur. 

De nouveaux attributs sont apparus en Html5. Leur prise en charge par les navigateurs est a ce jour nulle ou en cours 
d'implementation. En voici quelques-uns : 

placeholder 

Permet d'afficher une suggestion de saisie qui apparait en grise dans le champ de formulaire au chargement de la 
page. Ce texte disparait des que I'utilisateur donne le focus a I'element concerne. 

Cet attribut n'est pas encore repris par tous les navigateurs recents mais est deja repris par Firefox 4+, Safari4+ et 
Chrome 3 + . Cet attribut sera ignore par les navigateurs qui ne le prennent pas encore en charge. 

<input type="text" placeholder="votre nom de famille"> 



I o | m | 



□ Htm 15 
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Certains pourraient avancer que I'attribut value effectue la meme fonction. La difference est reelle mais subtile. Avec 
value, I'utilisateur doit effacer le texte avant d'effectuer son propre encodage. Avec placeholder, le texte est efface 
automatiquement des que le focus est donne a I'element. En outre, avec I'attribut value, en cas de soumission du 
formulaire sans modification de cette valeur par defaut, c'est celle-ci qui sera transmise. 

autofocus 

Donne le focus a I'element lors du chargement de la page. Cet attribut epargne quelques lignes de JavaScript qui 
realisaient cette fonction. 

Cet attribut ne semble pour I'instant n'etre repris que par Safari4+, Chrome 3+ et Opera 10 + . Cet attribut sera ignore 
par les navigateurs qui ne le prennent pas encore en charge. 

required 

Rend I'encodage de I'element obligatoire par I'utilisateur pour la soumission et le traitement du formulaire. Tres utile 
pour des elements essentiels comme le nom ou I'adresse email de I'utilisateur. 

Opera 10+ nous fournit une illustration de la reaction du navigateur lorsqu'un champ required serait laisse vide a la 
soumission du formulaire. 



<form action=""> 
Email (obligatoire) : 

<input type="text" name="mail" required><br> 
<input type=" submit " value="Soumettre"> 
</form> 



- 2- 
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Email (obligatoire) : 




Vous devez 
d'abord definir une 
valeur 




Soumettre 










E *? T & T <^ Zoom [100%) ^ 



Souhaitons cependant une infobulle plus elaboree sur le plan esthetique. 
pattern 

Definit I'expression reguliere JavaScript qui est utilisee pour la validation de I'encodage. Par exemple, pattern=" [0-9] " 
signifie que la valeur de I'element doit etre un nombre compris entre et 9. 

height 

Determine, en pixels ou en pourcentage, la hauteur de la ligne de texte. Peut etre remplace par la propriete CSS 

height. 

width 

Determine, en pixels ou en pourcentage, la largeur de la ligne de texte. Peut etre remplace par la propriete CSS width. 
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La zone de texte 



Dans certaines situations, il faut prevoir plus d'espace a I'utilisateur pour s'exprimer. C'est le cas, par exemple, pour 



des commentaires, remarques ou suggestions. On utilise alors la balise <textarea> . 
zone de texte de plusieurs lignes. 

Exemple 

Une zone de texte dediee aux commentaires de I'utilisateur : 


. </textarea> qui introduit une 


<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset=" iso-8859-1 "> 




</head> 




<body > 




<form action=""> 




<p>Commentaires : </p> 




<textarea rows = "4" cols="30"x/textarea> 




</f orm> 




</body> 




</html> 





(§/ Html5 - Moiilla Firefox | □ || B ||^^| 
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J Html5 + 










Commentaires : 












Termine 







Commentaires 

• Cette balise, basique en Html, est parfaitement compatible entre les differents navigateurs. 

• La balise <textarea> comporte une balise de fermeture </textarea>. 

• Une valeur par defaut peut etre prevue dans la zone de texte, non par I'attribut value mais de la facon 
Suivante : <textarea rows="4" cols="25">Vos suggestions ici! </textarea>. 

Les attributs possibles sont : 
name 

Definit un nom pour cet element, 
cols 

Definit le nombre de caracteres visibles en largeur de la zone de texte. Peut etre remplace par la propriete CSS width, 
rows 

Definit le nombre de lignes visibles en hauteur de la zone de texte. Peut etre remplace par la propriete CSS height. 
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readonly 

Indique que la valeur attribuee par defaut a la ligne de texte ne pourra etre modifiee par I'utilisateur. 

De nouveaux attributs sont apparus en Html5. Leur prise en charge par les navigateurs est a ce jour nulle ou en cours 
d'implementation. En voici quelques-uns : 

autofocus 

Donne le focus a I'element lors du chargement de la page, 
maxlength 

Determine le nombre maximal de caracteres que I'utilisateur peut encoder dans la zone de texte. Permet de limiter les 
utilisateurs prolixes. 

required 

Rend I'encodage de I'element obligatoire. 
wrap 

Specifie la fagon de gerer les retours automatiques a la ligne du texte lors de la soumission de la zone de texte. Avec 
wrap="hard", un caractere de passage a la ligne est transmis avec le texte. Avec wrap="soft" (defaut), aucun caractere 
de changement de ligne n'est transmis. 

Pour les puristes, cet attribut ne faisait plus partie du Html 4.0. II a ete reintroduit dans la specification Html5, sous une 
forme modifiee cependant. 

placeholder 

Affiche un texte dans le champ de formulaire au chargement de la page. Ce texte s'efface automatiquement des que 
I'utilisateur donne le focus a la zone de texte 



- 2- 
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La liste deroulante 

La liste deroulante propose differentes options a I'utilisateur. 



Exemple 



Demandons a I'utilisateur son navigateur prefere 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<form action=""> 

<p>votre navigateur prefere : 

<select> 

<option value=" 1 "> Internet Explorer</option> 

<option value=" 2 " >Firef ox</opt ion> 

<opt ion value=" 3 " >Saf ar i</option> 

<opt ion value=" 4 " >Opera</opt ion> 

<option value=" 5 " >Google Chrome</option> 

</select> 

</p> 

</f orm> 

</body> 

</html> 




Fichier Edition Pre:entation Hi:toric|ue Favoris Fenetre 
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Votre navigateur prefere : [ Internet EExp I 



□ rer 



Internet FJxplorer 



Firefox 

Safari 

Opera 

Google Chrome 



Commentaires 



• La balise <seiect>... </seiect> indique au navigateur I'usage d'une liste deroulante. Les elements de la liste 
sont introduits par les balises <option> ... </option>. 

• Cette balise est parfaitement compatible entre les differents navigateurs. 

Les attributs possibles sont : 
name 

Definit un nom pour la liste deroulante en vue d'un traitement ulterieur. 
size 

Par defaut, I'attribut size de la balise <seiect> est egal a i, ce qui est assez pratique car cela permet un gain de place 
appreciable dans la disposition de la page. Cependant par I'attribut size="x", vous pouvez definir le nombre 
d'elements du menu qui sera visible. Votre menu n'aura alors plus rien de deroulant ! 

<body> 
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<form action=""> 
<select size="4"> 

<option>Moins de 20 ans</option> 



<option>De 
<option>De 



20 
40 



40 
60 



ans</option> 
ans</option> 



<option>Plus de 60 ans</option> 

</select> 

</f orm> 

</body> 



& Htm 15 - Windows Internet Ex... | 
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De 40 a 60 ans 
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multiple 

Par defaut, I'utilisateur ne peut choisir qu'un element du menu deroulant. Avec I'attribut multiple de la balise <seiect>, 
plusieurs choix peuvent etre effectues. Pour ce faire, I'utilisateur doit maintenir la touche [Ctrl] du clavier et cliquer sur 
les elements avec la souris. II est alors preferable de rappeler dans la page cette fagon de proceder peu commune 
pour I'internaute moyen. 

L'attribut size doit etre specifie et egal au nombre des balises <option>. 
selected 



Par defaut, le premier element de la liste est retenu. 
I'attribut selected de la balise <option>. 



Mais il est possible de preselectionner un autre element par 



<body> 

<form action=""> 

<p>Votre navigateur prefere : 

<select> 

<option value=" IE" >Internet Explorer</option> 

<option value="FF">Firefox</ option> 

<option value="S" selected>Saf ari</option> 

<option value="0">Opera</ option> 

<option value="GC">Google Chrome</option> 

</select> 

</p> 

</f orm> 

</body> 
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Votre navigateur prefere : 



Safari [K 

Internet Ffxp I o re r ^ 
Firefox 

Opera 

Google Chrome 
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value 

En principe, c'est le texte de I'element choisi place derriere <option> qui est transmis lors de I'envoi du formulaire. Vous 
pouvez toutefois specifier qu'une autre valeur (generalement numerique) soit transmise avec I'attribut vaiue="vaieur". 

Mis a part autofocus, il n'y a pas de nouveaux attributs significatifs en Html5. 
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Les boutons de choix unique (radio) 



Les boutons de choix unique, aussi appeles boutons radio, ont comme particularity qu'une seule option a la fois peut 
etre activee (le "ou" exclusif). 

Exemple 

Informons-nous du sexe de I'interlocuteur : 



<!DOCTYPE html> 






j'Vif ml 1 r-r — " f ^ " \ 

^riCnl_L ±dlly — LL > 






<head> 






<title>Html5</title> 






<meta charset="iso-8859-l 


'> 




</head> 






<body> 






<form action=""> 






Sexe :<br> 






<input type="radio" name= 


'sexe 


' >Masculin 


<input type="radio" name= 


'sexe 


' >Feminin 


</f orm> 






</body> 






</html> 







Htrnl5 - Moiilla Firefc 



Fichier Edition Affichage Historique Marque-pages 



Htm 15 



Sexe : 
° Masculin 
Feminin 



Termine 



Commentaires 



• Cette balise est parfaitement compatible entre les differents navigateurs. 



• La balise <input> n'a pas de balise de fermeture. L'ecriture <input type ="radio"/>, inspiree du Xhtml, est 
egalement acceptee en Html5. 

Les attributs possibles sont : 
name 

Ici I'attribut name est obligatoire. En outre, dans le cas de boutons radio, le nom doit etre identique pour tous les 
boutons. 

checked 

Permet de preselectionner un bouton radio, 
value 

En vue d'un traitement ulterieur, on attribue une valeur a chaque bouton radio par I'attribut vaiue="vaieur". 
Mis a part autofocus, il n'y a pas de nouveaux attributs significatifs en Html5. 
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Les boutons de choix multiples (checkbox) 



La mise en oeuvre de ces boutons de choix multiples, aussi appeles boutons checkbox, est proche des boutons a choix 
unique mais, dans le cas present, plusieurs choix simultanes peuvent etre realises. 

Exemple 

Demandons de preciser les garnitures d'une pizza. 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




</head> 




<body > 




<form action=""> 




Votre pizza avec :<br> 




<input type="checkbox" name="nl"> 


Mozzarella<br> 


<input type=" checkbox" name="n2"> 


Jambon<br> 


<input type="checkbox" name="n3"> 


Sauce tomate<br> 


<input type=" checkbox" name="n4"> 


Poivrons<br> 


<input type="checkbox" name="n5"> 


Champignon s<br> 


<input type="checkbox" name="n6"> 


Olives noires<br> 


<input type="checkbox" name="n7"> 


Sauce piquante 


</f orm> 




</body> 




</html> 









^1 





Htm 15 - Moiilla Firefox 
Fichier Edition Affichage Historique Marque-pages 

- C <2> ' u u 




KM 



□ 



Htm 15 



Votre pizza avec : 
□ Mozzarella 
Jambon 
Sauce tomate 

. Champignons 
Olives notres 
Sauce piquante 

Termine 



4* 



Commentaires 



• Cette balise est parfaitement compatible entre les differents navigateurs. 



• La balise <input> n'a pas de balise de fermeture. L'ecriture <input type="checkbox" />, inspiree du Xhtml, est 
egalement acceptee en Html5. 

Les attributs possibles sont : 
name 

L'attribut name="nom" est obligatoire. Les regies sont moins precises que pour les boutons d'option. Vous pouvez 
utiliser des noms identiques ou des noms differents pour chaque case a cocher. Cependant des noms differents sont 
indispensables pour leur utilisation dans un script. 
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checked 

L'attribut checked permet de preselectionner une case a cocher. 



<form action=""> 




Votre pizza avec :<br> 




<input type=" checkbox" 


name="nl" checked > Mozzarella<br> 


<input type="checkbox" 


name="n2"> Jambon<br> 


<input type=" checkbox" 


name="n3" checked > Sauce tomate<br> 


<input type=" checkbox" 


name="n4"> Poivrons<br> 


<input type=" checkbox" 


name="n5"> Champignons<br> 


<input type=" checkbox" 


name="n6"> Olives noires<br> 


<input type=" checkbox" 


name="n7"> Sauce piquante 


</f orm> 





® Htm 15 - Mozilla Firefox 


□ II S H-S3-I 


Fichier Edition Affichage Historique Marque-pages 


4tp - e x & To . fit ^ - 




J HtmlS + 







Votre pizza avec : 
W\ Mozzarella 
d JamboE 
J Sauce tomate 

. Champignons 
Olives noires 
ID Sauce piquante 

Termine 4fc 

value 

En vue d'un traitement ulterieur, on attribue bien entendu une valeur a chaque bouton checkbox par l'attribut 

value="valeur " . 

Mis a part autofocus, il n'y a pas de nouveaux attributs significatifs en Html5. 



- 2- 
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Le bouton d'envoi 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<form action=""> 

<input type=" submit " > 

</f orm> 

</body> 

</html> 



ft Htm 15 - Windows Internet Ex... 


□ || H ||ip£3-| 




C:\UsersWan Lancl. " *f 


X 


Fichier Edition Affichage Favoris Outils M 


spg Favoris 


@ Htmt5 








Soumettre la requete 




|% Ordinateur | Mode pn ^ T 


*il00% ' 





Commentaires 



• Cette balise est parfaitement compatible entre les differents navigateurs. 



• La balise <input> n'a pas de balise de fermeture. L'ecriture <input type="submit" />, inspiree du Xhtml, est 
egalement acceptee en Html5. 



• Le texte du bouton est choisi par le navigateur. Force est de constater que celui-ci varie d'un navigateur a 
I'autre : Soumettre la requete pour Internet Exporer, Envoyer pour Firefox et Opera, Soumettre pour Safari et 
Valider pour Google Chrome. II est possible de modifier le texte par defaut du bouton par I'attribut value. La 

balise devient alors, par exemple, <input type="submit" value="Envoyer le formulaire">. 



• II est possible de remplacer le bouton de soumission par une image grace a la balise <input type="image>. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 
<body> 

<form action=""> 

Nom : <input type=" text " ><br > 

Mail : <input type="text"><br> 

<input type="image" src=" submit . gif" alt=" Soumettre" width="50" 

height="50"> 

</f orm> 

</body> 

</html> 
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■ Q Htm 15 


~ , - : 


G 


O file:///G:/submit.htm & 




Nona : 
Mail: 



















- 2- 



© E/V/ Editions - All rights reserved - Algeria Educ 



Le bouton d'annulation 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<form action=""> 

<input type="reset"> 

</f orm> 

</body> 

</html> 



Html5 - Windows Internet Ex... 


□ || S ||p£3-| 


Vjfc^'* C:\UsersWan Land " 


X 




Fichier Edition Affichage Favoris Outils M 


$g Favors | £fi Htm 15 








Reinitialiser 




1% Ordinateur | Mode pn ^ T 


*il00% ' 





Commentaires 

• Cette balise est parfaitement compatible entre les differents navigateurs. 

• La balise <input> n'a pas de balise de fermeture. L'ecriture <input type="reset" />, inspiree du Xhtml, est 
egalement acceptee en Html5. 

• L'intitule du bouton est choisi par le navigateur. La plupart de ceux-ci ont adopte Reinitialiser sauf Firefox qui 
prefere Effacer. II est possible de modifier le texte par defaut du bouton par I'attribut value. La balise devient 
alors, par exemple, <input type="reset" value="Recommmencer">. 
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Le bouton de commande 



En matiere de boutons (button), il y a aussi la balise <button> ... </button>. El le permet de declencher, au die de celui- 
ci, une action specifique definie par le concepteur du site, generalement a I'aide de JavaScript. El le offre egalement la 
possibility de realiser la soumission et I'annulation du formulaire (submit et reset). 

En outre, cette balise <button> a I'avantage de posseder une balise d'ouverture et de fermeture. II est ainsi possible 
d'y inclure du texte, des images ou du contenu Html. Notons egalement que cette balise <button> n'a pas besoin d'etre 
imbriquee dans un formulaire <form> et peut ainsi etre utilisee dans de multiples contextes. 

Tout ceci en fait une balise polyvalente et justifie son succes aupres des developpeurs. 
Exemple 

Au die d'un bouton, une fenetre d'alerte s'affiche : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<button onclick=" alert (' Act ion JavaScript' ) "> 

Cliquez-moi</button> 

</body> 

</html> 



I B |^ 





C:\UsersWan Lai 


6 


X 



Cliquez-moi 

\T~ 



Message de la page Web 

| Action JavaScript 



OK 



Commentaires 



Cette balise est parfaitement compatible entre les differents navigateurs. 
La balise <button> a bien une balise de fermeture, soit </button>. 



• Le texte du bouton prend place entre les balises et non par I'attribut value. Par exemple, <button>ciiquez- 

moi</button>. 

Les attributs possibles sont : 
name 

Specifie un nom pour le bouton. 
type 

L'attribut type admet trois arguments : 
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• button : utilise lorsque le bouton declenche un script (generalement repris comme defaut par les navigateurs). 

• submit : pour soumettre le formulaire. 

• reset : pour reinitialiser le formulaire. 

Les sites et les forums specialises recommandent de toujours specifier I'attribut type car I'argument button n'est pas 
repris comme valeur par defaut par tous les navigateurs (par exemple, Internet Explorer 8 en mode Xhtml Strict). 

disabled 

Permet de desactiver le bouton au chargement de la page. Celui-ci apparait alors en grise. Un script permettra de 
I'activer (enabled) apres une action de I'utilisateur, par exemple, apres avoir accepte des conditions d'utilisation. 

Mis a part autofocus, il n'y a pas de nouveaux attributs significatifs en Html5. 

Illustrons la possibility d'adjoindre une image a la balise <button> par I'ajout d'une petite icone (ok.png) disponible 
dans I'espace de telechargement reserve a cet ouvrage. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<buttonximg src="ok.png" alt="Soumettre" width="15" height="15"> 

Soumettre 

</button> 

</body> 

</html> 
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Les formulaires caches 



Les formulaires permettent de stocker des donnees qui ne seront pas visibles par le visiteur de la page. Ce type de 
champ est parfois utilise par les programmeurs confirmes (specialement en JavaScript) car il peut contenir des donnees 
d'un formulaire precedent, des donnees brutes ou des donnees issues d'un autre script. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<input type="hidden" name="c" value="3 . 1416"> 

</body> 

</html> 



Une capture d'ecran n'a pas de sens puisque le champ de formulaires est cache (hidden). 
Commentaires 

• Cette balise est parfaitement compatible entre les differents navigateurs. 

• La balise <input> n'a pas de balise de fermeture. L'ecriture <input type="hidden" />, inspiree du Xhtml, est 
egalement acceptee en Html5. 
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Les formulaires de transfert de fichiers 

La balise <input type="fiie"> prend en charge le transfert de fichiers (file) du poste de I'utilisateur vers un ordinateur 
de type serveur. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<form action="" method="post " enctype="multipart/f orm-data"> 

<input type="file"> 

</f orm> 

</body> 

</html> 



% Htrnl5 - Moiilla Firefox4.0 | □ 




I-43J 


Fichier Edition Affichage Historique Marque- pages 


!□ Html5 


+ | 




C *;|D fii.&^ L>s,P 






| Parcourir... 




Termine 


itS, 





Le die du bouton Parcourir (intitule variable selon les navigateurs) ouvre I'arborescence de votre ordinateur pour 
selectionner le fichier a transferer. 

Commentaires 

• Cette balise est parfaitement compatible entre les differents navigateurs. 

• La balise <input> n'a pas de balise de fermeture. L'ecriture <input type="file" />, inspiree du Xhtml, est 
egalement acceptee en Html5. 

• Les attributs habituels de la balise <input> peuvent etre utilises. Signalons cependant I'attribut maxiength qui 
permet de fixer la taille maximale de fichier a transferer. 

• Dans la declaration de la balise <form>, il faut imperativement utiliser les attributs method="post" et 

enctype="muitipart/form-data" pour le transfert au bon format du fichier. 

• II y a aussi I'attribut accept qui permet de limiter le transfert a certains types de fichiers. On peut citer des 
fichiers texte (txt), Word (doc), Excel (xls), pdf, des fichiers image (jpeg, gif ou png), etc. Dans la designation 
des fichiers, le joker * est accepte. 



• II faut noter que cette balise Html ne sert qu'a selectionner le fichier a transferer. Le transfert lui-meme doit 
etre pris en charge par des applications cote-serveur comme par exemple PHP. 
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Les formulaires de mot de passe 



Ce type de formulaire est en fait une simple ligne de texte mais dont I'encodage est remplace, a I'affichage, par des 
puces ou des asterisques. 

Ce formulaire de mot de passe ne protege en aucun cas les donnees car elles seront transmises en clair. Elles vous 
protegent uniquement contre les personnes qui pourraient vous lire durant I'encodage. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<form action=""> 
Login : 

<input type="password"> 

</f orm> 

</body> 

</html> 



(&) Htm 15 - Mozilla Firefox | □ || S | 


€3 | 


Fichier Edition Affichage Historique Marque-pages 


mm - e ^ Co *<rn 




j hftml5 x *1 Page tie demarra... + * 








Termine & 



Commentaires 

• Cette balise est parfaitement compatible entre les differents navigateurs. 

• La balise <input> n'a pas de balise de fermeture. L'ecriture <input type="password" />, inspiree du Xhtml, est 
egalement acceptee en Html5. 

• Les attributs usuels de la ligne de texte name, size, maxiength, etc. peuvent etre utilises. 
Mis a part autofocus, il n'y a pas de nouveaux attributs significatifs en Html5. 
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L'organisation des champs de formulaires 



Dans le cas de formulaires longs et complexes, il est parfois utile de regrouper graphiquement certains elements pour 
organiser la page de fagon logique. Les balises <fieidset> et <iegend> permettent d'ameliorer sensiblement 
I'ergonomie et I'usabilite des formulaires. 

La balise <fieidset> ... </fieidset> englobe les champs de formulaires que vous determinez. Ces champs sont alors 
visualises a I'ecran par une bordure. 

La balise <iegend> ... </iegend>, qui se place directement derriere la balise <fieidset>, ajoute une legende qui vient 
s'inserer dans la bordure dessinee par le <fieidset> (voir capture d'ecran suivante). 

Exemple 



Regroupons les entrees, les pizzas et les desserts dans une liste a choix multiples : 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<meta charset="iso-8859-l"> 




</head> 




<body> 




<form action=""> 




<f ieldset> 




<legend>Nos entrees</legend> 




<input type="checkbox" name="nl"> 


Chikenito' s<br> 


<input type="checkbox" name="n2"> 


Salade de saison<br> 


<input type="checkbox" name="n3"> 


Buffalo wings<br> 


</f ieldset> 




<f ieldset> 




<legend>Nos pizzas</legend> 




<input type="checkbox" name="n4"> 


Classique<br> 


<input type="checkbox" name="n5"> 


Campagnarde<br> 


<input type="checkbox" name="n6"> 


Diabolique<br> 


</f ieldset> 




<f ieldset> 




<legend>Nos desserts</legend> 




<input type="checkbox" name="n7"> 


Glaces variees<br> 


<input type=" checkbox" name="n8"> 


Cookies<br> 


<input type="checkbox" name="n9"> 


Moelleux au chocolat<br> 


</f ieldset> 




<input type="submit"> <input type= 


="reset"> 


</f orm> 




</body> 




</html> 





© ENI Editions - All rights reserved - Algeria Educ 



- 1- 



® Htm 15 - Moiilla Firefox | □ || B 
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^ Htm 15 X Page de demarra.., - 



Tv os entrees 

Chikenito's 
Salade de saison 
Buffalo wings 



os pizzas 

Classique 

Campagnarde 

Diabolique 



Tv os desserts 

Glaces varices 
D Cookies 

Moelleux au chocolat 



Envoyer Effacer 



L 



Termine 



Commentaires 



Cette balise est parfaitement compatible entre les differents navigateurs. 



• II ne faut pas oublier les balises de fermeture. 



II n'y a plus d'alignement gauche ou droit de la legende en Html5. Cette operation doit se faire par une feuille 
de style CSS. 
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L'etiquetage des champs de formulaires 



La balise <iabei> associe explicitement I'intitule a un champ de formulaire particulier. Un peu comme si on col la it une 
etiquette (label) en face d'un element de formulaire. 

Dans un premier temps, la balise <iabei> ameliore grandement I'ergonomie des formulaires en permettant d'activer un 
element de celui-ci, par exemple un bouton radio, en cliquant sur le bouton radio lui-meme ou sur I'intitule de celui-ci. 

Mais les balises <iabei> sont aussi particulierement utiles dans le domaine de I'accessibilite des sites Web aux 
personnes non voyantes. Ces "etiquettes" sont prises en charge par les aides techniques (barrettes braille ou 
syntheses vocales) et facilitent grandement I'utilisation des formulaires par les personnes visuellement deficientes. 

Dans un premier temps, le texte assigne a un element de formulaire doit etre place entre les balises <iabei> 
</label>. 

<label>Nom</label> : 
<input type=" text " ><br> 

II faut ensuite relier cette etiquette label au controle de formulaire. Pour ce faire, I'element de formulaire sera defini par 
un identifiant de type id. 

<label>Nom</label> : 

<input type="text" id="fl"><br> 

L'attribut for="... n ajoute a la balise <iabei> permet de raccorder directement I'etiquette au champ de formulaire en 
faisant reference a cet identifiant. 

<label for="f 1 ">Nom</label> : 
<input type="text" id="fl"><br> 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<form action=""> 

<p>Paiement par : <br> 

<label f or="cashl">Visa</label> 

<input type="radio" name="cash" id="cashl"xbr> 

<label f or=" cash2 ">American Express</label> 

<input type="radio" name="cash" id="cash2"xbr> 

< label for="cash3 ">Mastercard</label> 

<input type="radio" name="cash" id="cash3"> 

</p> 

</f orm> 

</body> 

</html> 
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Paiement par : 
Visa 

American Express 
Mastercard ® 



J 



II n'y a pas de nouveaux attributs significatifs en Html5. 
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La ligne de texte avec liste de suggestions 



La balise <dataiist> ajoutee a une ligne de texte ouvre une liste de suggestions d'encodage au focus de celle-ci. 
L'utilisateur peut retenir une suggestion ou encoder une valeur de son choix. Ceci est proche de ce que Google 
Suggest presente lors de I'entree d'un mot-cle dans sa barre de recherche. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<form action=""> 

Choisir un fruit : 

<input type="text" list="fruits"> 

<datalist id="fruits"> 

<option value="Orange"></ option> 

<option value="Pomme"x/option> 

<option value=" Poire ">< /opt ion> 

<option value= "P rune ">< /opt ion> 

</datalist> 

</f orm> 

</body> 

</html> 



La balise <dataiist> contient une liste de balises <option> reprenant les suggestions d'encodage. Ces balises 
<option> doivent toujours posseder un attribut value. 

La balise <dataiist> est reliee a un champ de formulaire par un identifiant id qui renvoie a I'attribut list de celui-ci, ici 
la ligne de texte. 

Cette balise n'est pas encore reprise par les navigateurs, sauf par Opera 10 + . 



O Htm 15 - Opera 
Fichier Editer Afficher Signets Widgets 



Htm 15 



HiojL*l 



Choisir un fruit 




G^Zoom [100%) ' 
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La ligne de texte d'adresse email 



Combien de fois ne vous a-t-on pas demande votre adresse de courrier electronique lors de votre utilisation de la 



Quel casse-tete aussi pour les concepteurs d'applications Web afin de disposer d'une adresse mail valide ! 
Le Html5 repond a ce besoin avec la balise <input type="emaii">. 

Cette balise n'est encore reprise a ce jour que par le navigateur innovant mais assez confidentiel qu'est Opera. II nous 
permettra d'illustrer les perspectives ouvertes par celle nouvelle balise introduite par le Html5. 

El le se revele particulierement interessante par la validation directe par le navigateur, sans I'ajout de JavaScript par le 
concepteur. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 
<body> 

<form action=""> 

Email : <input type="email" name="mail" required> 

<input type=" submit" value="OK"> 

</f orm> 

</body> 

</html> 



A priori, la ligne de texte introduite par cette balise ne se distingue pas d'une ligne de texte normale. 



toile ? 



O Htm 15 - Opera | □ | | B 

Fichier Editer Afficher Signets Widgets 




+ 



Email 




Soumettre 



(HZoom [100%] - 



Cependant, a la soumission du formulaire, une infobulle annonce que I'adresse email est incorrecte. 
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O Htm 15 - Opera 

Fichier Editer Afficher Signets Widgets 
J U Htm 15 



Email : 


eni @free 


a 


eni @free.fr n'est 
pas une adresse 
email correcte 




Soum 





E i 



I G^Zoom 0-00%} T 



En outre, de par I'attribut required, une autre infobulle signale que le champ doit etre obligatoirement complete. 
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Email : 


| 


Vous devez 
d'abord definir une 
valeur 




Soum 





Esperons cependant qu'a I'avenir ces infobulles soient plus esthetiques. 

Profitons de cette balise email pour parler de I'attribut autocompiete du Html5 disponible dans plusieurs elements de 
formulaires. Pour autant que I'option soit activee dans les preferences du navigateur, cet attribut propose de completer 
automatiquement la ligne de formulaire a partir de votre adresse de courrier electronique. 
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La ligne de texte d'url 



Assez proche de la balise precedente <input type="emaii">, la balise <input type="uri"> est destinee a recueillir des 
adresses Web (url). 

Cette balise n'est encore reprise a ce jour que par Opera. II nous permettra cependant d'illustrer les perspectives 
ouvertes par cette nouvelle balise introduite par le Html5. 

Ici aussi une validation est realisee en direct (sans JavaSript) par le navigateur lui-meme. 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<form action=""> 

Url de votre site : <input type="url" name="web"> 

<input type=" submit" value="OK"> 

</f orm> 

</body> 

</html> 
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Url de votre site 





ww.google.fr n'est 
pas une adresse 
web correcte 
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La ligne de texte de format numerique 



Autre nouveau formulaire apporte par le Html5, les compteurs numeriques. Ces compteurs, que Ton retrouve 
frequemment dans les applications logicielles comme les traitements de texte, sont a present utilisables dans les 
formulaires Web. 

Cette nouvelle balise <input type="number"> a des attributs specifiques : 
min 

Indique la valeur minimale du compteur. 
max 

Indique la valeur maximale du compteur. 
step 

Determine le pas d'avancement a chaque pression de la souris sur la fleche H ou E . 
value 

La valeur de depart du compteur. 
Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<form action=""> 

Nombre d' articles (conditionnes par 2) : <br> 

<input type="number " name="q" min="2" max="10" step="2" value="2"> 

</f orm> 

</body> 

</html> 



Au depart 




Q Htm 15 
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Par une pression des petites fleches, I'utilisateur peut augmenter ou diminuer le compteur. 
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Nombre d' articles (conditionnes par 2): 

I 6 tfl 



En utilisant le fichier Html5 disponible dans I'espace de telechargement, on remarquera que la valeur initiale est de 2, 
qu'il n'est pas possible de descendre en dessous de 2 et au-dessus de 10 et que chaque pression sur les (petites) 
fleches augmente ou diminue le compteur de 2 unites (voir le code source de I'exemple). 

Commentaires 



• Au stade de I'ecriture de ce livre, ce compteur n'est implante que dans les versions recentes d'Opera 10 + . 



• Le code reste neanmoins compatible avec les navigateurs qui ne prennent pas encore en charge cette nouvelle 
balise en affichant une simple ligne de texte a completer manuellement. 



1 
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rv ombre d' articles (conditionnes par 2) 



V 



Gageons qu'a I'avenir ce nouveau champ de formulaires connaitra un succes certain notamment dans les sites de vente 
en ligne. 
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La ligne de texte de format de date 



Les calendriers ont pris une place preponderante dans les applications du Web 2.0. Leur utilite est indeniable dans 
tous les sites de reservation en ligne, que ce soit pour un billet d'avion ou d'une chambre d'hotel. 

Pour les developpeurs, les formats de date posent un reel probleme, surtout pour les sites a vocation internationale 
(jj/mm/aa ou mm/jj/aa). 

A ce jour, ces calendriers etaient affiches en faisant appel a des scripts complexes ou des frameworks JavaScript (par 
exemple Dojo). 

Le Html5 propose (a I'avenir) des champs de formulaires specialement adaptes a I'encodage de dates et de faire 
apparaitre automatiquement par navigateur interpose, sans plugins particuliers, un calendrier ou I'utilisateur aura le 
choix dans la date au format souhaite par le concepteur. 

II s'agit d'une des avancees majeures du Html5 en termes de conception de sites. 
A ce jour, seul Opera 10+ permet d'illustrer cette nouvelle fonctionnalite. 
Au depart : 



-0 IkSH 
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Date d'arrivee : 
Date de depart : 



E I *Sb 



Au focus du champ, le calendrier apparait : 
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Date d'arrivee : 
Date de depart 
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29 


30 
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40 
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6 


7 
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Aujourd'hui 


Aucune 
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Le code de ceci tient en quelques lignes : 



<!DOCTYPE html> 
<html lang="fr"> 
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<head> 

<title>Html5</title> 

<meta charset="iso-8859-l "> 

<form action=""> 

Date d' arrivee : <input type="date" name="in"xbr> 

Date de depart : <input type="date" name="out"> 

</f orm> 

</body> 

</html> 



Cette balise <input> de format de date se decline sous plusieurs formes. 
<input type="date"> 

La plus generale, illustree ci-avant. El le permet de selectionner I'annee, le mois et le jour. 
<input type="month"> 

Pour le mois et I'annee. Utile par exemple pour la date d'expiration d'une carte de credit. 



© lineal 
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Date d'expiration : 
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15 
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24 


25 


26 


27 


2E 


23 
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Date d'expiration : <input type="month" name="in"> 

<input type="week"> 

Pour une semaine determinee. 
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Semaine reservee : <input type="week" name="in"> 

Mais Html5 n'en reste pas la. II propose egalement un outil pour le format horaire 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<form action=""> 
Livraison de la pizza a : 

<input type="time" min="ll:00" max="23:00" step="900" 

value="ll : 00"> 

</f orm> 

</body> 

</html> 
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Livraison de la pizza a : 12:45 
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L'attribut min permet de fixer une heure de debut du compteur, max une heure de fin et step I'avancement, ici de 15 en 
15 minutes (900 secondes) a chaque pression sur la petite fleche. 

Et enfin il est possible de combiner le calendrier et le compteur horaire avec les balises <input type="datetime"> et 
<input type="datetime-local">. 
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<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<form action=""> 

Jour et heure d' arrivee : 

<input type="datetime" name="in"> 

</f orm> 

</body> 

</html> 
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UTC 
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25 26 27 28 i ? 
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La ligne de texte de recherche 



Tres nombreux sont les sites ou applications Web qui proposent un outil de recherche. Celui-ci prend souvent la forme 
d'une ligne de texte. 

Le Html5 propose avec la balise <input type="search"> une ligne de texte specialement dediee a cette possibility de 
recherche. 

Cette balise n'est pas encore reprise par les navigateurs. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<form action=""> 

Moteur de recherche : 

<input type="search"> 

<input type=" submit" value "Go"> 

</f orm> 

</body> 

</html> 



II se dit dans les blogs specialises dans le Html5 que cette ligne de texte dediee aux outils de recherche pourrait 
prendre une forme particuliere. Pourquoi pas une ligne de texte a bords arrondis, ce qui lui donnerait un look Macintosh 



OS X ? 
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La ligne de texte de couleur 



Html5 prevoit egalement une ligne de texte destinee a recevoir I'encodage d'une couleur (en hexadecimal) avec la 

balise <input type="color ">. 

Au focus de cette ligne de texte, une palette de couleur devrait apparaitre automatiquement et au choix d'une couleur, 
la valeur de celle-ci serait reportee. 

Nous parlons au conditionnel car a ce jour cette fonctionnalite n'est implementee dans aucun navigateur. La capture 
d'ecran suivante n'est done qu'une simulation realisee a partir du cadriciel Dojo. 
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Les curseurs 



Les curseurs sont des outils conviviaux et intuitifs pour fixer dans les applications logicielles une valeur, generalement 
numerique. lis sont presents ainsi par exemple dans les traitements de texte ou autres programmes graphiques 
comme Photoshop. 

Les curseurs sont introduits dans le Html5 par la balise <input type="range">. Gageons que ce controle original est 
appele a connaitre un grand succes aupres des concepteurs et qu'il envahira les applications Web 2.0 dans un avenir 
proche. 

Les curseurs ne sont pour I'instant operationnels que dans les dernieres versions de Chrome 5 + , Safari 5+ et Opera 
10 + . Les autres navigateurs traitent les balises <input type="range"> comme de simples lignes de texte (<input 
type="text">). II n'y a done pas de raisons de s'en priver et de les adopter des a present. 



Fichier Edition Presentation Hi:toric|ue Favoris. Fenetre 



+ file:///G/Users/V. C | f Or Google 



Quantites coinmandees 

■ 6 



Le code est : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<form action=""> 

Quantites commandees<br> 

<input name="curseur" type="range"> 

</f orm> 

</body> 

</html> 



Cette nouvelle balise <input type="range"> a des attributs specifiques, identiques a ceux de <input type="number">. 
min 

Indique la valeur minimale du compteur. 
max 

Indique la valeur maximale du compteur. 
step 

Determine le pas d'avancement a chaque pression de la souris sur la fleche augmenter ou diminuer (voir capture 
d'ecran suivante). 

value 

La valeur de depart du compteur. 

Habille de quelques feuilles de style, I'exemple suivant met en place un curseur qui se positionne au depart sur 3 
(attribut value) et dont les valeurs minimales et maximales sont 1 et 5. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 
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<style> 

span {margin-right: 25px; ) 

</ style 

</head> 

<body> 

<form action=""> 
Quantites commandees<br> 

<input name="curseur " type="range" min="l" max="5" value="3" 

step="l" style="margin-top : 10px"xbr> 

<div style="margin-top : -2px"> 

<span style="margin-lef t : 2px; ">K/span> 

<span>2</ span> 

<span>3</ span> 

<span>4</ span> 

<span>5</ span> 

</div> 

</f orm> 

</body> 

</html> 
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Pour convaincre le lecteur ou confirmer a I'utilisateur le choix effectue, quelques lignes de JavaScript feront apparaitre 
la valeur ainsi retenue. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

span {margin-right: 25px; } 
</style> 

< script type="text / javascript "> 
function afficher (choix) { 

document . getElementByld ( "valeur "). innerHTML = choix; 
} 

</script> 

</head> 

<body> 

<form action=""> 
Quantites commandees<br> 

<input name="curseur " type="range" min="l" max="5" value="3" 

step="l" style="margin-top : lOpx" 

onchange=" afficher ( this . value ) " ><br> 

<div style="margin-top : -2px"> 

<span style="margin-lef t : 2px; ">K/span> 

<span>2</ span> 

<span>3</ span> 

<span>4</ span> 

<span>5</ span> 

</div> 
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<p>Vous avez choisi.. 

</f orm> 

</body> 

</html> 



<span id="valeur">3</spanx/p> 



O Htm 15 - Opera 




=i || ||h£3h| 


Rchier Ed iter Afficher 


Signets 


Widgets Ol 


J H Htm 15 


l| + 









Quantites commandees 

1 2 3 4 ^ 
Vous avez choisi... 5 



@LZoom (100%) ' 



© ENI Editions - All rights reserved - Algeria Educ 



- 3- 



Une application complete 



Elaborons un formulaire pour une activite commerciale. Les premiers champs du formulaire ont trait aux coordonnees 
du client ; nom et prenom, adresse, code postal et pays (France exclusivement). Les autres elements ont trait a la 
commande (le modele Road 66), la tail le et les quantites. 

Les groupes Client et Commande peuvent etre regroupes par une balise <fieidset>. 

Le protocole mailto, malgre ses limites, est utilise pour I'envoi du formulaire pour des raisons pratiques 
d'apprentissage. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style> 

fieldset { border : lpx solid black; } 

</style> 

</head> 

<body> 

<form action="mailto : votre_adresse_email " method="post" 

enctype="text/plain"> 

<f ieldset> 

<legend><i>Client</ix/legend> 

Nom et prenom : <input type="text" name="Nom"xbr> 
Adresse: <input type="text" name="Adresse"><br> 
Code Postal : <input type="text" name="CP" size="4" 
maxlength=" 5 " ><br> 

Pays : <input type="text" readonly name="Pays" value="France"> 

</f ieldset> 

<br> 

<f ieldset> 

<legend><i>Commande</ ix/legend> 

Modele : <input type="text" readonly name="Modele" value="Road 

66"><br> 

Taille : <br> 

<input type="radio" name="Taille" value="S">S<br> 

<input type="radio" name="Taille" value="M">M<br> 

<input type="radio" name="Taille" value="L">L<br> 

<input type="radio" name="Taille" value="XL">XL<br> 

Quantite : <input type="text" name="Quantite" value=" 1 "><br> 

</f ieldset> 

<br> 

<input type=" submit " value="Commander "> 

<input type="reset" value="Recommencer"> 

</f orm> 

</body> 

</html> 
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i- Client 

Nom et prenoin 
Adresse: 
Code Postal : 



Pavs : France 



■ Commands - 



Modele : Road 66 
Taille : 

OS 
OM 
L 
I XL 



Quantite : 1 



Commander Recommencer 



A la reception, le courrier peut prendre la forme suivante 



Nom=Dumoulin Adrien 

Adresse=Rue de la gare, 22 Perpignan 

CP=66000 

Pays=France 

Modele=Road 6 6 

Taille=L 

Quantite=2 



Soit a chaque fois le nom donne (name) au champ de formulaire, le signe egal = et les donnees encodees par 
I'utilisateur. 

Ce formulaire est en soi assez similaire a un formulaire Html 4.0. II nous parait interessant d'y adjoindre des balises et 
attributs propres au Html5 et de mettre en avant les nouvelles fonctionnalites apportees par le Html5. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style> 

fieldset { border : lpx solid black; } 

</style> 

</head> 

<body> 

<form action="mailto : votre_adresse_email " method="post " 

enctype="text/plain"> 

<f ieldset> 

<legend><i>Client</ix/legend> 

Nom et prenom : <input type="text" name="Nom" required 
placeholder="Nom et prenom"xbr> 

Adresse: <input type="text" name="Adresse" required><br> 

Code Postal : <input type="text" name="CP" size="4" maxlength=" 5 " 

required pattern=" [ 0-9 ] " ><br> 

Pays : <input type="text" readonly name="Pays" value="France"> 
</f ieldset> 
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<br> 

<f ieldset> 

<legend><i>Commande</ ix/legend> 

Modele : <input type="text" readonly name="Modele" value="Road 

66"><br> 

Taille : <br> 

<input type="range" name="Taille" min="l" max="4" step="l" 

value="2"> 

<div> 

<span>S</ span> 

<span>M</ span> 

<span>L</ span> 

<span>XL</span> 

</div> 

<br> 

Quantite : <input type="number " name="Quantite" min="l" max="6" 
step="l" value="l"><br> 
</f ieldset> 
<br> 

<input type=" submit " value="Commander "> 

<input type="reset" value="Recommencer"> 

</f orm> 

</body> 

</html> 
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- Client 



Nom et prenom : enom 
Adresse: Adresse complete 
Code Postal : 



Pays : France 



- Commands 

Modele 
Taille: 



Road 6G 



- Hk) 

S M L 

Quantite : 



XL 



® 



Commander Recommencer 



Ce formulaire faisant appel au Html5 est deja visuellement fort different avec I'ajout d'un curseur pour les tailles et d'un 
compteur pour les quantites. 

Les champs Nom et prenom et Adresse se sont vus completes par une suggestion de saisie qui apparait en grise 
(attribut placeholder). 

Divers champs se sont vus completes par I'attribut required qui les rend obligatoires. A la soumission, une infobulle 
apparait pour completer le champ. 
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Le code postal s'est vu dote d'une expression reguliere (attribut pattern) qui reclame un encodage exclusivement 
numerique. Une infobulle apparaTt si I'encodage n'est pas valide. 

Le compteur pour les quantites permet d'imposer une quantite maximale, ici 6 pieces, par I'attribut max. 

Voila qui devient fort different du Html 4.0 et ouvre de nombreuses perspectives pour les futures applications Html. 
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L'insertion d'un fichier audio 



1. La balise <audio> 

Jusqu'a present, il n'y avait pas de standard pour ajouter du son dans une application Web. Cette operation 
s'effectuait par I'appel a un plugin, par exemple Flash, mais tous les navigateurs ne disposaient pas des memes 
plugins. 

Le Html5 propose a present une nouvelle balise pour reproduire les fichiers sonores, quels que soient les plugins 
installes chez I'utilisateur. 

L'insertion d'un fichier audio se realise tres simplement par la balise : 

<audio src="fichier_son"></ audio 

Etant donne ('implementation encore tres limitee de cette balise <audio> dans les navigateurs existants, il n'est pas 
inutile de prevoir au moins un message pour les navigateurs qui ne prennent pas en charge cette balise. 

<audio src="f ichier_son"> 

Votre navigateur ne supporte pas la balise audio. 
</ audio> 

Affichons un premier exemple : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<audio src="piano_ogg . ogg" controls> 

Votre navigateur ne supporte pas la balise audio. 

</audio> 

</body> 

</html> 



L'adressage du fichier audio suppose ici que celui-ci se trouve dans le meme repertoire que le fichier Html contenant 
la balise audio. 

Resultat dans Firefox 3.6, qui reconnait la balise <audio> et le format ogg : 




Resultat dans Internet Explorer 8, qui ne reconnait pas la balise <audio> : 
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Html5 - Windows Internet Explorer EDEllS 


.... 

;. Favors 


© E:\audiol.htm '-. ^|j%jj'X"j Bing 





Yotre navigateur ne supporte pas la baKse audio. 



jj Poste de travail I 'ffl T ^ 1UUT<1 T 

Les attributs de la balise <audio> sont : 
src 

Obligatoire. Definit I'adresse du fichier son. 
controls 

Affiche les controles du lecteur audio (voir capture d'ecran). Ceux-ci comportent les fonctions de lecture, d'arret, 
d'avancement et de volume. 

<audio src="son . ogg" controls> 

En I'absence de I'attribut controls, les controles du lecteur ne seront pas affiches par le navigateur. 

La notation Xhtml des attributs controis="controis" est aussi rencontree. 

autoplay 

Definit la lecture automatique du fichier audio des que celui-ci sera disponible, soit au chargement de la page. 

<audio src="son . ogg" autoplay> 

Faut-il rappeler que cette lecture automatique du fichier audio n'est pas forcement appreciee par tous les utilisateurs. 
Ceux-ci ecoutent peut-etre leur propre musique ou consultent votre site dans un espace ou le silence est de rigueur. 
En outre, cette introduction sonore sera tres genante pour les utilisateurs d'une synthese vocale. 

La notation Xhtml de I'attribut autopiay="autopiay" est egalement acceptee. 

loop 

Specifie que le fichier son sera joue en boucle. Ainsi, le morceau sonore est joue a nouveau lorsqu'il se termine. 

<audio src="son . ogg" autoplay> 

La notation ioop="ioop" est aussi acceptee. 
preload 

Indique au navigateur qu'il doit telecharger le fichier audio au chargement de la page de sorte qu'il soit disponible 
pour une lecture immediate lors de la demande de I'utilisateur. 

<audio src="son . ogg" preload> 

Cet attribut peut etre precise : 

• preioad="none". Pas de prechargement. 

• preioad="metadata". Prechargement des metadonnees (metadata) attachees au fichier. 

• preioad="auto". Prechargement automatique. 

Cet attribut preload est ignore si I'attribut autoplay est present. 
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II faut noter la concision de I'insertion d'un fichier sonore grace a cette balise <audio> et ses attributs en 
nombre reduit. 



2. Les formats de fichier audio 

La situation ideale aurait ete qu'un seul format de fichier soit repris et qu'en outre ce format soit un format libre. 
Le format ogg 

Ce fut I'option de Firefox qui le premier implementa la balise <audio> dans son navigateur. Le format libre ogg a ete 
retenu. 

Ogg est le nom du principal projet de la fondation Xiph.org dont le but est de proposer a la communaute des formats 
et codecs multimedias ouverts, libres et degages de tout brevet. L'extension .ogg est une des extensions possibles 
pour les fichiers au format ogg. Par abus de langage, on appelle couramment "fichier Ogg" un fichier audio au format 
ogg contenant des donnees audio compressees en Vorbis, I'un des codecs du projet ogg (source Wikipedia). 

Les fichiers ogg constituent une alternative libre au format mp3, beaucoup plus connu et repandu. 

Le format ogg est reconnu par Firefox 3.6+, Chrome 5+ et Opera 10. 6+. II ne Test pas par Safari 5+ et Internet 
Explorer 9. 

Le format mp3 

Difficile de se passer de I'emblematique format mp3 pour les fichiers son. 

Le MPEG-1/2 Audio Layer 3, plus connu sous son abreviation de MP3, est la specification sonore du standard MPEG- 
l/MPEG-2, du Moving Picture Experts Group (MPEG). C'est un algorithme de compression audio capable de reduire 
drastiquement la quantite de donnees necessaire pour restituer de I'audio, mais qui, pour I'auditeur, ressemble a une 
reproduction du son original non compresse, c'est-a-dire avec perte de qualite sonore significative mais acceptable 
pour I'oreille humaine (source Wikipedia). 

Le mp3 est souvent pergu par I'utilisateur final comme une technologie gratuite. Celui-ci peut en effet coder ou 
decoder sa musique de maniere tout a fait legale pour peu que I'enregistrement original lui appartienne ou qu'il soit 
une copie a usage prive. Pourtant, cette technologie proprietaire fait I'objet de brevets et d'une licence commerciale. 

Le format mp3 est reconnu par Chrome 5+, Safari 5+ et Internet Explorer 9. II ne Test pas par Firefox 3.6 et 4 et 
Opera 10.6. 

Le format acc 

II y a plus performant en termes de compression que le format ogg et mp3. C'est le format acc. 

Le format ACC (Advanced Audio Coding) est un algorithme de compression audio avec perte de donnees ayant de 
meilleures performances en termes de compression que le format plus ancien MPEG-1/2 Audio Layer 3 (plus connu 
sous le nom de mp3). Pour cette raison, il a ete choisi par differentes firmes comme Apple ou RealNetworks (source 
Wikipedia). 

Le format acc est le format des fichiers audio supportes par Apple au sein de son baladeur numerique iPod et de son 
logiciel iTunes. 

II s'agit ici egalement d'un format proprietaire. 

Le format acc est reconnu par Chrome 5+, Safari 5+ et Internet Explorer 9. II ne Test pas par Firefox 3.6 et 4, Opera 
10.6. 

Le format wav 

Citons pour memoire I'antique format waw mais qui, par son absence de compression, n'apparalt pas des plus 
adaptes a la toile. En effet, la taille des fichiers wav est souvent tres (ou trop) volumineuse. 

Le format wav est reconnu par Firefox 3.6+, Safari 5+ et Opera 10. 6+. II ne Test pas par Chrome 5+ et Internet 
Explorer 9. 



Tableau comparatif 





Chrome 5+ 


Firefox 3.6+ 


Opera 10.6+ 


Safari 5+ 


Explorer 9 


ogg 


oui 


oui 


oui 


non 


non 
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mp3 


oui 


non 


non 


oui 


oui 


acc 


oui 


non 


non 


oui 


oui 


wav 


non 


oui 


oui 


oui 


non 



En guise de conclusion : 



• La balise <audio> est bien implementee dans les navigateurs recents. 



• Google Chrome 5+ apparait de loin le plus polyvalent en ce qui concerne les formats audio. 

Le Html5 n'est encore qu'au stade naissant. Un nouveau format audio peut encore apparaitre. Un navigateur peut 
encore reconnaitre un format a ce jour non retenu. L'auteur vous conseille de consulter regulierement la rubrique 
Html5 Audio Codecs du site www.findmebyip.com/litmus/ pour les developpements futurs possibles. 



3. La balise <source> 

La balise <source> va nous permettre de resoudre cette problematique des formats de fichiers differents. 

La balise <source> est utilisee pour specifier plusieurs ressources audio. A charge du navigateur de choisir le format 
qu'il prend en compte. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<audio controls> 
<source src="piano_ogg . ogg"> 
<source src="piano_mp3 .mp3"> 
<source src="piano_acc . acc"> 

Votre navigateur ne supporte pas la balise audio. 

</audio> 

</body> 

</html> 




D Htm 15 

«- C O file:///C:/Users/Van% ft A 



00:00 



Les fichiers sont disponibles dans I'espace de telechargement. 

II est important de comprendre le fonctionnement de ces differentes balises <source>. 

Supposons que cette page est lue par le navigateur Safari qui, pour rappel, ne reconnait pas le format ogg. Safari 
ignore la premiere balise <source> qui renvoie a un fichier ogg. II passe a la seconde balise <source> qui propose un 
fichier mp3. Comme le format mp3 est reconnu par Safari, c'est cette ressource qui sera utilisee pour reproduire le 
fichier son. 
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Par contre, Firefox, qui gere les fichiers ogg, reprend la premiere ressource. Les autres balises <source> sont 
ignorees. 

Les balises <source> sont lues dans I'ordre d'apparition dans le code. Le navigateur utilisera la premiere ressource 
qu'il prend en charge. 

Ces multiples balises <source> assurent une parfaite prise en charge des differents formats de fichier audio. 
Cependant, le concepteur du site ou de I'application Web doit encoder le fichier audio plusieurs fois afin de le 
convertir dans les differents formats. 

Les attributs de la balise <audio> sont : 

src 

Obligatoire. Definit I'adresse du fichier son. 
type 

Definit le type MIME du contenu. Soit : 

• type="audio/ogg". 

• type="audio/mpeg". 

• type="audio/acc" . 

On peut egalement specifier le codec utilise. L'attribut type devient alors : type="audio/ogg; codecs=vorbis". 

En specifiant l'attribut type, vous accelerez le processus de prise en charge de la balise <source> la plus adequate 
pour le navigateur. 



4. Des convertisseurs audio 

De nombreux convertisseurs audio, gratuits ou en version devaluation sont disponibles sur la toile. Epinglons les 
deux logiciels suivants. 

Switch Audio Converter 

Logiciel gratuit. Telechargeable a I'adresse www.nch.com.au/switch/index.html. Existe pour Windows et pour Mac. 

Switch permet de convertir au format ogg, mp3 et acc mais aussi en bien d'autres formats audio (wma, flac, raw...). En 
outre, la qualite du fichier de sortie peut etre ajustee afin d'en reduire la taille. 




| Switch Sound File Converter 
File Convert Edit Help 

* u m i a? 

Add File(s] Add Folder RemoveAII Options 



List of files to convert 
{J\ piano_ogg 



Save to folder: C:^UEers\Van Lancker Luc^usic 
Output Format: 



,rnp3 t 



Encoder Options., 



*3 

Convert 



1 items, items currently selected 



Audacity 

Avec Audacity, vous disposez d'un editeur audio relativement complet et facile d'utilisation. II est disponible pour 
Windows, Mac OS X, Linux et bien d'autres systemes d'exploitation. 
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II vous permet d'editer les fichiers audio par copier/coller, mixer plusieurs pistes, ajouter des effets de fondu en 
ouverture et/ou en fermeture, ajouter des effets sonores, corriger le bruit et le volume, etc. 

Au niveau de la conversion des formats audio, Audacity propose de tres nombreux formats d'exportation dont bien 
entendu les formats ogg, mp3 et ACC de la balise <audio>. 



5. Compatibility avec les anciens navigateurs 

II est possible d'assurer une compatibilite pour les navigateurs qui ne supportent pas la balise <audio> comme par 
exemple Internet Explorer 8. 

Nous avons vu qu'un contenu alternatif pouvait etre fourni a la balise <audio>. Plutot qu'une simple phrase annongant 
que le navigateur ne prend pas en charge cette balise, il est tout a fait possible d'inclure les balises <object> et 
<param> necessaires a cette ancienne generation de navigateurs pour lire les fichiers audio. 

Le code perd ainsi en simplicite mais la compatibilite sera assuree. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<audio controls> 
<source src="piano_ogg . ogg"> 
<source src="piano_mp3 .mp3"> 
<source src="piano_acc . acc"> 

<object type="audio/mpeg" data="piano_mp3 .mp3" width="280" 
height="45" 

class id=' CLSID :22d6f 312-bOf 6-lld0-94ab-0 8 0c7 4c7e95> 

<param name="src" value="piano_mp3 .mp3"> 

<param name="autoplay " value="false"> 

<param name="loop" value=" f alse"> 

<param name="controller " value="true"> 

</ob ject> 

</audio> 

</body> 

</html> 



Le fichier est alors compatible dans Internet Explorer 8. 



f: Html5 - Windows Internet Explorer (]T](n)[x) 


WW" 

^ Favoris 


© E:\audio3.htm ^| j **J ]'X'j \® Bing 


@Html5 ^ ' 

' ! 




Poste de travail 



' ' ^ 100% " 
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L'insertion d'un fichier video 



1. La balise <video> 

Depuis quelques annees, la video a envahi le Web. II suffit, par exemple, de penser au succes de YouTube. Pourtant, 
en Html 4.0, il n'y avait pas de standard pour ajouter de la video dans une application Web. Cette operation 
s'effectuait par I'appel a un plugin : QuickTime, RealPlayer ou Flash. Le tout etait d'avoir le bon plugin au bon moment. 

Le Html5 propose a present une nouvelle balise pour reproduire les fichiers video quels que soient les plugins 
installes chez I'utilisateur. 

L'insertion d'un fichier video se realise tres simplement par la balise : 

<video src="f ichier_video"x/video> 

Etant donne I'implementation encore tres limitee de cette balise <video> dans les navigateurs existants, il n'est pas 
inutile de prevoir au moins un message pour les navigateurs qui ne prennent pas en charge cette balise. 

<video src="f ichier_video"> 

Votre navigateur ne supporte pas la balise video. 
</video> 

Affichons un premier exemple. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<video src="video_ogv . ogv" controls> 

Votre navigateur ne supporte pas la balise video. 

</video> 

</body> 

</html> 



L'adressage du fichier video suppose ici que celui-ci se trouve dans le meme repertoire que le fichier Html contenant 
la balise video. 

Resultat dans Firefox 3.6 qui reconnait la balise <video> et le format ogv. 
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Les attributs de la balise <video> sont : 

SIX 

Obligatoire. Definit I'adresse du fichier video, 
width 

Determine la largeur de la video, 
height 

Determine la hauteur de la video. 

Comme pour la balise <img>, vous pouvez definir explicitement les dimensions de votre video. Sinon, I'element sera 
par defaut affiche a la largeur et la hauteur du fichier video. Si vous specifiez une dimension mais pas I'autre, le 
navigateur va ajuster la ta i I le de la dimension non specifiee afin de preserver les proportions de la video. 

poster 

L'attribut poster permet de specifier une image que le navigateur utilisera alors que la video est en cours de 
telechargement ou jusqu'a ce que I'utilisateur commence la lecture de la video. Si cet attribut n'est pas specifie, la 
premiere image de la video sera utilisee a la place. 

<video src="video_ogv . ogv" poster=" image . png"> 

controls 

Affiche les controles du lecteur de video (voir capture d'ecran). Ceux-ci comportent les fonctions de lecture, d'arret, 
d'avancement et de volume. 

<video src="video_ogv . ogv" controls> 

En I'absence de l'attribut controls, les controles du lecteur ne seront pas affiches par le navigateur. 

La notation Xhtml des attributs controis="controis" est aussi rencontree. 

autoplay 

Definit la lecture automatique du fichier video des que celui-ci sera disponible, soit au chargement de la page. 

<video src="video_ogv . ogv" autoplay> 

Nous rappelons que cette lecture automatique n'est pas appreciee par tous les utilisateurs surtout si, dans le cas 
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present, la page comporte un contenu textuel. 

La notation Xhtml de I'attribut autopiay="autopiay" est egalement acceptee. 
loop 

Specifie que le fichier video sera joue en boucle. Ainsi, la video est jouee a nouveau lorsqu'elle se termine. 

<video src="video_ogv . ogv" loop> 

La notation ioop="ioop" est aussi acceptee. 
preload 

Indique au navigateur qu'il doit telecharger le fichier video au chargement de la page de sorte qu'il soit disponible 
pour une lecture immediate lors de la demande de I'utilisateur. 

<video src="video_ogv . ogv" preload> 

Cet attribut peut etre precise : 

• preioad="none". Pas de prechargement. 

• preioad="metadata". Prechargement des metadata attachees au fichier. 

• preioad="auto". Prechargement automatique. 

Cet attribut preload est ignore si I'attribut autopiay est present. 



2. Les formats de fichier video 

Tout comme pour les fichiers audio, il existe plusieurs formats de fichiers video. 
Format ogv 

Le format ogv est le pendant video de I'extension ogg pour les fichiers audio. 

Les fichiers de video ogv reprennent le codec Theora pour la video et Vorbis pour la partie audio. 

Rappelons que les formats ogg et ogv sont des formats libres. 

Ce format fut repris par Firefox 3.6 des I'implementation de la balise video (juin 2009). Opera 10.5+ et Chrome 3+ le 
prennent egalement en compte. 

Format H.264 

Le navigateur Safari pour Mac et PC fait largement appel a QuickTime qui reconnait de nombreux formats mais pas le 
format ogg et les codecs Theora et Vorbis. II se tourna alors vers le codec H.264. 

H.264 est un codec de compression video numerique des images et video haute definition a la norme MPEG-4, 
developpe par le VCRG (Video Coding Experts Group) en partenariat avec le MPEG (Moving Picture Experts Group), aussi 
connu sous I'appellation AVC (Advanced Video Coding). Le format H.264 est aussi repris sous le vocable MPEG-4 AVC ou 
encore MPEG-4 Part 10. 

Ce format, soutenu par Apple, connait un succes indeniable surtout depuis son adoption par YouTube. 

Mais le format H.264 n'est pas un format libre et gratuit. C'est un format proprietaire qui est soumis a des redevances 
et royalties. 

Devant les protestations des defenseurs d'un Web libre, le consortium MPEG-LA a d'abord liberalise le format H.264 
pour les sites et les plates-formes proposant gratuitement leurs contenus video jusqu'en 2011. Cette echeance fut 
repoussee ensuite jusqu'en 2016. Finalement sous la poussee d'un nouveau format libre, le WebM, soutenu par 
Google, le consortium a decide de rendre le format libre de royalties dans les cas ou la video est gratuitement 
accessible par I'utilisateur final. 

Belle illustration de la guerre des formats video a laquelle nous assistons pour I'instant... 

Le format H.264 est reconnu par Chrome 5+, Safari 5+ et Internet Explorer 9. II ne Test pas par Firefox et Opera 10.6. 



Format WebM 
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Google est devenu proprietaire du codec video VP8 depuis le rachat de I'entreprise On2 Technologies. 

Pour contrer I'ascension fulgurante du format H.264, Google a publie en mai 2010 le code source du codec VP8 sous 
licence libre. II s'est associe a Mozilla et Opera pour proposer un format audio-video ouvert, le WebM, qui rassemble 
VP8 pour les flux video et Vorbis pour les flux audio. 

Le format WebM est reconnu par Firefox 4+, Chrome 6+ et Opera 10. 6+. II ne I'est pas par Safari 5+ et Internet 
Explorer 9. 



Tableau comparatif 





Chrome 


Firefox 


Opera 
10.6+ 


Safari 5+ 


Explorer 
9 


5 


6 


3.6 


4 


ogv 


oui 


oui 


oui 


oui 


oui 


non 


non 


H.264 


oui 


oui 


non 


non 


non 


oui 


oui 


WebM 


non 


oui 


non 


oui 


oui 


non 


non 



En guise de conclusion : 



• La balise <video> est bien implementee dans les navigateurs recents. 

• Google Chrome 6+ apparait de loin le plus polyvalent en ce qui concerne les formats video. 

Le Html5 n'est encore qu'au stade naissant. Un nouveau format video peut encore apparaitre. Un navigateur peut 
encore reconnaitre un format a ce jour non retenu. L'auteur vous conseille de consulter regulierement la rubrique 
Html5 Video Codecs du site www.findmebyip.com/litmus/ pour les developpements futurs possibles. 



3. La balise <source> 

La balise <source> permet de resoudre cette problematique des formats de fichiers differents. 

La balise <source> est utilisee pour specifier plusieurs ressources video. A charge du navigateur de choisir le format 
qu'il prend en compte. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<video controls> 
<source src="video_ogv . ogv"> 
<source src="video_mp4 .mp4"> 
<source src="video_webm.webm"> 

Votre navigateur ne supporte pas la balise video. 

</video> 

</body> 

</html> 
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ohesion 



Les fichiers sont disponibles dans I'espace de telechargement. 

II est important de comprendre le fonctionnement de ces differentes balises <source>. 

Soumettons ce fichier au navigateur Safari qui pour rappel, ne reconnait pas le format ogv. Safari ignore la premiere 
balise <source> qui renvoie a un fichier ogv. II passe a la seconde balise <source> qui propose un fichier mp4. Comme 
le format mp4 est reconnu par Safari, c'est cette ressource qui sera utilisee pour reproduire le fichier video. 

Par contre, Firefox, qui gere les fichiers ogv, reprend la premiere ressource. Les autres balises <source> sont 
ignorees. 

Les balises <source> sont lues dans I'ordre d'apparition dans le code. Le navigateur utilisera la premiere ressource 
qu'il prend en charge. 

Ces multiples balises <source> assurent une parfaite prise en charge des differents formats de fichier video. 

Cependant, le concepteur du site ou de I'application Web doit encoder le fichier video plusieurs fois afin de le 
convertir dans les differents formats. 

Les attributs de la balise <source> sont : 

src 

Obligatoire. Definit I'adresse du fichier video, 
type 

Definit le type MIME du contenu. Soit : 

• type="video/ogg" . 

• type=" video/mp4 " . 

• type=" video/webm" . 

On peut egalement specifier les codecs utilises. L'attribut type devient : 

• type=' video/ogg; codecs="theora, vorbis"'. 

• type=' video/webm; codecs="vp8, vorbis"'. 

• type=' video/mp4 ; codecs="avcl . 42E01E, mp4a . 4 . 2 " ' . 



En specifiant l'attribut type, vous accelerez le processus de prise en charge de la balise <source> la plus adequate 
pour le navigateur. 
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4. Des convertisseurs video 



De nombreux convertisseurs gratuits ou en version devaluation sont disponibles sur la toile. Nous en avons retenu 
quelques-uns. 



Miro Video Converter 

Miro Video Converter est logiciel libre pour Windows et Mac. II peut etre telecharge a I'adresse : 
www.mirovideoconverter.com/ 

II convertit n'importe quelle video pour permettre sa lecture sur iPhone, Android, PSP, etc. Glissez/deposez 
simplement le fichier a transformer sur I'interface du logiciel puis selectionnez le format souhaite (MP4, Ogg Theora, 
WebM, etc.) ou I'appareil de destination : Android, PSP, iPhone, iPad, etc. Enfin, cliquez sur Convert! et le tour est 
joue 



5 I 



Miro Video Converter 




To convert, drag a video file here or choose a file 






1*1 WebM. (vpS) 


T 1 




About/Help 


Convert! 



II est difficile de faire plus simple en matiere de conversion de fichiers video. Seul inconvenient, il n'est pas possible de 
configurer precisement les parametres de conversion. 



Prism Video Converter 

Prism Video Converter est un convertisseur video gratuit qui prend en charge la plupart des formats video. Vous 
pourrez ainsi encoder vos fichiers AVI, DivX, MPG, VOB, WMV, 3GP... aux formats compatibles PSP, iPod, mobiles, 
lecteur de salon, etc. Tres simple d'utilisation, cette application comporte egalement des parametres de configuration 
et de personnalisation tels que le taux de compression et la resolution des fichiers sortants, ou encore I'acces direct 
par le menu contextuel. 
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/<4 Prism Video File Converter 
File Help 



C3 



ft 



Add File(s) Add Folder Add DVD Remove Remove All Options 



Suite 



Help 



List of Files to Convert 
Video 1 



Format 
,avi 



Size (MB) 
170.367 



Contaii 

CiVJseGB; Resolution: 3... 



Save to Folder C:YJsers\Van Lancker Luc^Videos 



Browse. 



Output Format ,mp4 



Encoder Options. . , Video Options.. Open... 



E 

Convert 



Prism Video File Converter v 1,61 NCH Software 



Firefogg 

Firefogg est une extension de Firefox qui convertit automatiquement les videos vers un format ouvert (Ogv et WebM). 
Telechargeable a I'adresse http://firefogg.org/. 




7 \%<%%L* 



Firefogg 

vid&o encoding and uploading for Firetox 
Sites using Firefogg - Use Firefogg on your Site - Make web video 



Les conversions avec Firefogg sont parfaitement parametrables. 



Cv Setectionnez un nouveau fichier Q Sauvegarderau format Ogg * 

Si 



Video_oriqinal.avi 



Pretiefini : Parametres personnalises 



► Portee de I'encodage 



v Qualite basique et corttrole de la resolution 

y Metadonnees pour le clip 

► Controies avancee de I'encodage video 

► Centrales avances de I'encodage audio 




Comme Firegogg est une extension de Firefox, I'util isateur est ainsi assure de disposer des derniers progres en ce 
qui concerne les formats retenus. 
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5. Compatibility avec les anciens navigateurs 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<video controls> 
<source src="video_ogv . ogv"> 
<source src="video_mp4 .mp4"> 
<source src="video_webm.webm"> 

<ob ject classid="clsid: 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 

codebase="http : / /www . apple . com/qtactivex/qtplugin .cab" width="550 '' 

height = " 32 " standby="Chargement . . . " > 

<param name="src" value=" video_mp4 . mp4 "> 

<param name="type" value="aplication/x-mplayer2"> 

<param name="autoplay " value="true"> 

<param name="quality " value="high"> 

<p>La video ne peut etre affichee. Lien vers le <a 

href ="http : / /www . apple . com/ quicktime /download/ ">plug-in</a> a 

telecharger ou lien vers le <a href ="video_mp4 .mp4">fichier 

video</a> directement . </p> 

</ob ject> 

</video> 

</body> 

</html> 
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■; .V Favoris 
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■j Poste de travail 



- j ^ 100% - 
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Introduction 



La nouvelle balise <canvas> permet d'integrer des zones de dessin en 2D dans la page. Ces dessins permettent, par 
exemple, d'afficher des graphiques du genre Excel sans passer par des captures d'ecran. En outre, ces elements 
pourront etre rendus dynamiques a partir de scripts JavaScript. 

Cette nouvelle fonctionnalite canevas est bien reconnue par les navigateurs modernes de notre etude : Safari 5+, 
Chrome 7+, Opera 10. 6+, Internet Explorer 9 + , et n'oublions pas Firefox 3.6 + , qui a ete I'instigateur de cette balise 

<canvas>. 

Celle-ci laisse entrevoir de belles opportunites en termes de design et de graphisme, surtout que le dessin 3D est 
annonce. Certains n'hesitent pas a y voir un concurrent serieux de Flash. 



© ENI Editions - All rights reserved - Algeria Educ 



- 1 - 



La balise <canvas> 

La balise <canvas> introduit une zone qui accueillera les dessins et autres graphismes. 

Les dimensions de cette zone sont introduites par les attributs width et height qui en fixent la largeur et la hauteur. 

<canvas width="200px" height="200px"x/canvas> 

Cette zone de rendu est par defaut transparente. Une capture d'ecran a ce stade est inutile. 

Pour visualiser cette zone introduite par la balise <canvas>, ajoutons-lui, par une propriete de style, une simple bordure 
de lpx. 

En outre, prevoyons un identifiant de type id afin de pouvoir utiliser cette zone graphique initiee par la balise <canvas>. 
Le code devient ainsi : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<canvas id="zone" width="200px" height="200px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas. 

</canvas> 

</body> 

</html> 



USUI 
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La balise <canvas> n'est compatible qu'avec les toutes dernieres versions des navigateurs. II est ainsi prudent de 
prevoir un contenu alternatif pour les navigateurs plus anciens qui ne prennent pas en charge cette derniere : 

<canvas id="zone" width="200px" height="200px" style="border : 
lpx solid black"> 

Votre navigateur ne supporte pas la balise canvas. 
</canvas> 



Le code complet est alors 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l "> 
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</head> 
<body> 

<canvas id="zone" width="200px" height="200px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas. 

</canvas> 

</body> 

</html> 



En voici le resultat dans Internet Explorer 8, qui ne reconnalt pas la balise <canvas> 



Htm 1 5 - Windows Internet Ex... 



□SB 



■,; 9 E:\Xl.htm 

Favoris 



! HtmlS 



Votre navigateur ne supporte pas la balise 
canvas. 



Poste de travail 



■ffr - #i 100% " 



Commentaires 



• Lorsque les attributs width et height ne sont pas specifies, le canevas sera initialement de 300 pixels de large 
et 150 pixels de haut. 

• II est possible d'avoir plusieurs balises <canvas> sur la meme page. L'identifiant id prend dans ce cas toute son 
utilite. 

• L'element <canvas> peut etre style de la meme fagon que n'importe quelle image normale (marges, bordures, 
fond, etc.). Ces regies n'affectent en rien le dessin du canevas lui-meme. 
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Appel de I'API de dessin 



Et c'est tout pour le Html. Celui-ci passe la main au JavaScript pour mettre en oeuvre les dessins et autres graphismes 
de la zone de rendu. 

Ceci peut etre deconcertant pour ceux qui decouvrent I'ecriture de pages Web par le Html. JavaScript est un langage 
de programmation qui vient parfois s'ajouter au code Html. Les instructions JavaScript sont gerees par le navigateur 
lui-meme (cote-client) et apportent une dose d'interactivite aux applications. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<canvas id="zone" width="200px" height=" 150px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

< script t ype=" text/ javascript "> 

var canevas = document . getElementByld ( "zone" ); 

var contexte = myCanvas . getContext ( "2d" ); 

// Suite du script 

</script> 

</body> 

</html> 



Detaillons ces nouvelles lignes de code. 

<script type="text/ javascript"> 
</script> 

Les scripts JavaScript sont introduits par la balise <script type="text/ javascript"> . . . </script>. Cette balise peut 
se placer dans le <head> ou le <body> du document Html. 

var canevas = document . getElementByld (" zone" ) ; 

La variable canevas contient I'element du document (document) identifie par I'identifiant zone (getElementByld 
("zone") ). II faut respecter scrupuleusement la casse de getElementByld. 

var contexte = canevas . getContext ( "2d" ) ; 

La variable contexte va chercher I'application API de dessin 2D (getContext ("2d") ) a appliquer a la variable canevas. 
Commentaires 

Les specifications du Html5 prevoient pour I'avenir des dessins en 3D. Des applications, au stade experimental, 
fonctionnent deja sous Opera 10 mais on est encore loin d'une quelconque standardisation. 
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Dessiner un rectangle 



Avant de passer au code relatif aux dessins, il est necessaire de specifier la notation utilisee pour les coordonnees. 




L'origine des axes x et y est placee dans le coin superieur gauche [coordonnees (0,0)]. Tous les elements du canevas 
sont definis relativement a ce point d'origine. Ainsi, I'arete superieure gauche du carre colorie est definie a x pixels 
horizontalement a partir de la gauche et y pixels verticalement depuis le haut [coordonnees (x,y)]. 

Un rectangle plein est dessine par la fonction fiiiRect (x,y, width, height) . 
Exemole 



Dessinons un rectangle plein dont I'arete superieure gauche est situee a 25 pixels du bord gauche et 25 pixels du bord 
haut. Notre rectangle a une largeur (width) de 150 pixels et une hauteur (height) de 100 pixels. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<canvas id="zone" width="200px" height="200px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<script type="text / javascript "> 

var canevas = document . getElementByld ( "zone" ); 

var contexte = canevas . getContext ( "2d" ) ; 

contexte.fillRect (25, 50, 150, 100); 

</script> 

</body> 

</html> 



© ENI Editions - All rights reserved - Algeria Educ 



- 1- 




Par defaut, la couleur est le noir. Des le point suivant, nous decouvrirons comment colorier les dessins. 
La fonction ciearRect (x, y, width, height) efface la zone specifiee et la rend entierement transparente. 

Exemple 

Decoupons une zone dans le rectangle defini ci-avant. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<canvas id="zone" width="200px" height="200px" style="border : 
lpx solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<script t ype=" text/ javascript "> 

var canevas = document . getElementByld ( "zone" ); 

var contexte = canevas . getContext ( "2d" ); 

contexte.fillRect (25, 50, 150, 100); 

contexte. ciearRect (50,75,100,50); 

</script> 

</body> 

</html> 
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Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<canvas id="zone" width="200px" height="200px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<script t ype=" text/ javascript "> 

var canevas = document . getElementByld (" zone" ) ; 

var contexte = canevas . getContext ( "2d" ) ; 

contexte.strokeRect (25, 50, 150, 100) ; 

</script> 

</body> 

</html> 





C:\UsersWan Lai 


6 


X 



Htm 15 



*9 



© ENI Editions - All rights reserved - Algeria Educ 



- 3- 



Ajouter de la couleur 



Pour ajouter de la couleur, vous disposez des proprieties 

f illStyle="couleur" et strokeStyle="couleur". 

La notation des couleurs accepte toutes les specifications de couleurs CSS et meme celles des CSS3 (voir plus loin dans 
ce livre). Ainsi, la couleur orange peut se definir par : 



- ctx. fillStyle = 

- ctx. fillStyle = 

- ctx. fillStyle = 

- ctx. fillStyle = 



"orange" ; 

"#FFA5 0"; 

"rgb (255, 165, 0) "; 

"rgba (255, 165, 0, 1) "; 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<canvas id="dessin" width="200px" height="200px" style="border : 
lpx solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<script type="text / javascript "> 

var canvas = document . getElementByld ( "dessin" ) ; 

var contexte = canvas . getContext ( "2d" ); 

contexte. fillStyle = "#99ccff"; 

contexte. fillRect (25, 50, 150, 100); 

</script> 

</body> 

</html> 




Commentaire 

Si vous definissez la propriete strokestyie et/ou fiiistyie, la nouvelle valeur devient celle par defaut pour toutes les 
formes dessinees a partir de cet instant. Pour chaque forme qui doit etre dans une couleur differente, vous devrez 
reassigner les proprietes f mstyie ou strokestyie. 
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Tracer une ligne droite 



La methode iineTo(x,y) permet de dessiner des lignes droites. Les arguments x et y sont les coordonnees de 
I'extremite finale de la ligne. Le point de depart depend des chemins dessines precedemment, puisque le dernier point 
d'un chemin est le point de depart du suivant, etc. Le point de depart peut egalement etre change a I'aide de la 
methode moveio. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<canvas id="zone" width="200px" height="200px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<script type="text / javascript "> 

var canevas = document . getElementByld (" zone" ) ; 

var contexte = canevas . getContext ( "2d" ) ; 

contexte .beginPath ( ) ; 

contexte .moveTo {25, 25); 

contexte . lineTo (175, 175); 

contexte . moveTo (17 5, 25) ; 

contexte . lineTo (25, 175); 

contexte . stroke ( ) ; 

</script> 

</body> 

</html> 
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Detaillons le code 



contexte .moveTo (25, 25); 
contexte . lineTo ( 17 5 , 175); 

Le script positionne le stylo virtuel a son point de depart (moveTo (25, 25)) et dessine la premiere diagonale (lineTo 

(175, 175)). 

contexte . moveTo ( 17 5 , 2 5 ) ; 
contexte . lineTo (25, 175); 
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Ensuite, le stylo est deplace jusqu'a I'extremite de la seconde diagonale (moveTo (175,25) ) et II trace celle-ci (lineio (25, 

175)). 



contexte . stroke ( ) ; 



Avec les rectangles, toutes les operations (dessin, couleur, etc.) etaient appliquees directement dans le canevas. Pour 
toutes les autres formes, c'est comme si vous utilisiez un stylo sans encre. II faut en quelque sorte faire apparaitre 
I'encre a la fin du dessin, d'ou le code stroke () . 

Plusieurs proprietes permettent de changer le style des lignes. 

La propriete iinewidth=vaieur definit I'epaisseur du trait de la ligne courante. La valeur par defaut est de 1 pixel. 
Dessinons plusieurs lignes verticales d'epaisseurs differentes. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<canvas id="zone" width="200px" height="200px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<script type="text / javascript "> 

var canevas = document . getElementByld (" zone" ) ; 

var contexte = canevas . getContext ( "2d" ) ; 

contexte. strokeStyle = "#99ccff"; 

contexte .beginPath ( ) ; 

contexte . lineWidth = 5; 

contexte .moveTo (50, 25); 

contexte. lineTo(50, 175); 

contexte . stroke ( ) ; 

contexte .beginPath ( ) ; 

contexte . moveTo (100,25) ; 

contexte . lineWidth = 10; 

contexte. lineTo(100, 175); 

contexte . stroke ( ) ; 

contexte .beginPath ( ) ; 

contexte .moveTo (150,25) ; 

contexte . lineWidth = 15; 

contexte . lineTo (150, 175); 

contexte . stroke () ; 

</script> 

</body> 

</html> 
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La propriete iineCap=vaieur determine comment sont dessinees les extremites de chaque ligne. Les trois valeurs 
possibles pour cette propriete sont : butt, round et square. Par defaut, celle-ci est definie a butt. 
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La capture d'ecran et I'exemple suivant illustrent chacune des valeurs de la propriete lineCap : 

• La valeur round ajoute un demi-cercle a I'extremite de la ligne. Le rayon de celui-ci est de la moitie de 
I'epaisseur de la ligne. 

• La valeur butt (defaut) se termine exactement a I'endroit defini par le code. 

• La valeur square ajoute une boite de la largeur de la ligne et haute de la moitie de I'epaisseur de celle-ci. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<canvas id="zone" width="200px" height = "200px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<script t ype=" text/ javascript "> 

var canevas = document . getElementByld (" zone" ) ; 

var contexte = canevas . getContext ( "2d" ) ; 

contexte . strokeStyle = "#99ccff"; 

contexte . lineWidth = 25; 

contexte .beginPath ( ) ; 

contexte .moveTo (50, 25); 

contexte . lineCap="round" ; 

contexte. lineTo(50, 175); 

contexte . stroke ( ) ; 

contexte .beginPath ( ) ; 

contexte . lineCap="butt " ; 

contexte . moveTo (100,25) ; 

contexte. lineTodOO, 175); 

contexte . stroke ( ) ; 

contexte .beginPath ( ) ; 

contexte .moveTo (150,25) ; 

contexte . lineCap=" square " ; 

contexte. lineTo(150, 175); 

contexte . stroke () ; 

</script> 

</body> 
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</html> 



La propriete iineJoin=vaieur definit la fagon dont deux lignes qui se rejoignent sont reliees entre-elles. Les trois 
valeurs possibles pour cette propriete sont : round, bevel et miter. Par defaut, celle-ci est definie a miter. 

La capture d'ecran et I'exemple suivant illustrent chacune des valeurs de la propriete lineJoin : 

• La valeur round arrondit les coins de la forme. Le rayon de I'arrondi est egal a I'epaisseur de la ligne. 

• La valeur bevel n'effectue aucune operation. 

• La valeur miter (defaut) fait prolonger les lignes pour qu'elles se rejoignent en un seul point. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<canvas id="zone" width="200px" height="220px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

< script type="text / javascript "> 

var canevas = document . getElementByld (" zone" ) ; 

var contexte = canevas . getContext ( "2d" ) ; 

contexte . strokeStyle = "#99ccff"; 

contexte . lineWidth = 20; 

contexte .beginPath ( ) ; 

contexte . line Join=" round" ; 

contexte . moveTo {25 , 10 0) ; 

contexte. lineTo(100, 25) ; 

contexte . lineTo (175,100) ; 

contexte . stroke () ; 

contexte .beginPath ( ) ; 

contexte . line Join= "bevel " ; 

contexte .moveTo (25,150); 

contexte. lineTo (100, 75) ; 

contexte . lineTo (175,150) ; 

contexte . stroke ( ) ; 

contexte .beginPath ( ) ; 

contexte . lineJoin="miter " ; 

contexte .moveTo (25, 200) ; 
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contexte. lineTo (100, 125) ; 

contexte.lineTo(175,200) ; 

contexte . stroke ( ) ; 

</script> 

</body> 

</html> 
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Dessiner des formes geometriques 



POUT dessiner des arcs et des cercles, il faut Utiliser la methode arc(x, y, rayon, angleDepart, angleFin, 
senslnverse) . 

Cette methode prend cinq parametres : x et y sont les coordonnees du centre du cercle et rayon est bien entendu son 
rayon. Les parametres angleDepart et angleFin definissent les points de depart et d'arrivee de Tare en radians. Ceux-ci 
sont mesures a partir de I'axe x. Le parametre senslnverse est une valeur booleenne qui, lorsqu'elle est mise a true, 
dessine Tare dans le sens inverse des aiguilles d'une montre. Autrement (false), le dessin se fait dans le sens des 
aiguilles d'une montre. 

Notons que les angles dans la fonction arc sont exprimes en radians et non en degres. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<canvas id="zone" width="200px" height="200px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<script type="text / javascript "> 

var canevas = document . getElementByld (" zone" ) ; 
var contexte = canevas . getContext ( "2d" ) ; 
contexte.fillStyle = "#99ccff"; 
contexte . lineWidth = 2; 
contexte .beginPath ( ) ; 

contexte. arc (85, 85, 70, 0, 2*Math.PI, true); 

contexte . f ill ( ) ; 

contexte .beginPath ( ) ; 

contexte . strokeStyle = "black"; 

contexte. arc (140, 140, 40, 0, 2*Math.PI, true); 

contexte . stroke ( ) ; 

</script> 

</body> 

</html> 



Pour les formes complexes, les courbes de Bezier sont egalement disponibles dans les fonctions de canevas. Les 
courbes de Bezier dessinent les courbes a partir de formules mathematiques. Leur apprentissage est aussi complexe 
que les courbes dessinees et reclame une formation en infographie poussee. Elles sont reprises ici pour information. 

Deux fonctions sont disponibles : quadraticCurveTo et bezierCurveTo. Une courbe de Bezier quadratique a un point de 
depart, un point d'arrivee et un point unique de controle. Une courbe de Bezier cubique dispose par contre de deux 
points de controle. 
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L'utilisation de courbes de Bezier quadratiques et cubiques peut s'averer relativement ardue car, contrairement aux 
logiciels de dessin vectoriel comme Adobe Illustrator, on ne dispose pas d'un retour visuel direct sur ce que Ton est en 
train d'elaborer. Cela rend le dessin de formes complexes assez difficile. 

Voici quelques exemples simples. 

Le premier exploite la fonction quadraticCurveTo. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<canvas id="zone" width=" 150px" height=" 150px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<script type="text / javascript "> 

var canevas = document . getElementByld (" zone" ) ; 
var contexte = canevas . getContext ( "2d" ) ; 
contexte .beginPath ( ) ; 
contexte . lineWidth = 2; 
contexte . moveTo ( 75 , 2 5 ) ; 

contexte . quadrat icCurveTo (25,25,25, 62.5) ; 

contexte. quadraticCurveTo (25, 100, 50, 100) ; 

contexte . quadraticCurveTo (50, 120, 30, 125) ; 

contexte . quadraticCurveTo (60, 120, 65, 100) ; 

contexte . quadraticCurveTo (125,100,125,62.5) ; 

contexte . quadraticCurveTo (125,25,75,25); 

contexte . stroke ( ) ; 

</script> 

</body> 

</html> 




Le second exemple reprend bezierCurveTo. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<canvas id="zone" width=" 150px" height=" 150px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

< script type="text / javascript "> 

var canevas = document . getElementByld (" zone" ) ; 
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var contexte = canevas . getContext ( "2d" ) ; 
contexte .beginPath ( ) ; 
contexte . lineWidth = 2; 
contexte . moveTo (75,40) ; 

contexte . bezierCurveTo (75,37,70,25,50,25) ; 

context e.bezierCurveTo (2 0, 25, 20, 62. 5, 20, 62. 5); 

contexte. bezierCurveTo (20, 80, 40, 102, 75, 120); 

context e.bezierCurveTo (110, 102, 130, 80, 130, 62. 5); 

contexte. bezierCurveTo (130, 62. 5, 130, 25, 100, 25) ; 

context e.bezierCurveTo (85, 25, 75, 37, 75, 40) ; 

contexte . stroke ( ) ; 

</script> 

</body> 

</html> 
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Importer des images 



L'importation des images se realise en deux etapes : 

• II faut d'abord creer une image comme objet JavaScript. II n'est pas possible d'inclure une image simplement 
par I'attribut Html src. 

• La fonction drawimage est utilisee pour dessiner I'image dans le canevas. II est important de veiller a ce que 
I'image soit bien chargee avant de faire appel a la fonction drawimage. 

La syntaxe de cette fonction drawimage (image, x, y) ou image est une reference a I'image et x, y les coordonnees du 
placement de I'image dans le canevas. 

Les images peuvent etre au format GIF, JPEG ou PNG. 
Exemple 1 

<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

< script type="text / javascript "> 
function dessin() { 

var canevas = document . getElementByld (" zone" ) ; 

var contexte = canevas . getContext ( "2d" ) ; 

var img = new Image (); 

img.src = 'rose.png'; 

contexte . drawimage ( img, 5,5); 

} 

</script> 

<body onload="dessin ( ) "> 

<canvas id="zone" width="210px" height="194px" style="border : lpx 
solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<img src=" rose . png" style=" visibility : hidden; "> 

</body> 

</html> 





Exemple 2 

II est bien entendu possible de superposer des lignes sur une image. 
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Soit une image de fond de graphique : 

so 



4--.- 



20 



0-1 \ \ 1 1 

1 2 3 * S 6 

A cette image, incluse dans le canevas, nous allons ajouter une ligne de graphique. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

< script type="text / javascript "> 
function dessin() { 

var canevas = document . getElementByld (" zone" ) ; 

var contexte = canevas . getContext ( "2d" ) ; 

var img = new Image (); 

img.src = ' graphe . png' ; 

contexte . drawlmage ( img, 0,0); 

contexte . beginPath ( ) ; 

contexte . lineWidth = 2; 

contexte .moveTo (18, 244) ; 

contexte . lineTo (12, 67 ) ; 

contexte. lineTo (12 4, 186) ; 

contexte.lineTo(176,36) ; 

contexte. lineTo(228, 212) ; 

contexte. lineTo (280, 126) ; 

contexte . stroke ( ) ; 

} 

</script> 

<body onload="dessin ( ) "> 

<canvas id="zone" width="285px" height="260px"> 
Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<img src="graphe .png" sty le=" visibility : hidden; " > 

</body> 

</html> 
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Ajouter du texte 



Pour ajouter du texte dans le canevas, le concepteur dispose des methodes filiText ("texte", x, y) et strokeText 
("texte", x, y) ou texte est le texte a inclure, x la coordonnee horizontale du debut du texte et y la coordonnee 
verticale du debut du texte. 

Ces methodes comportent trois proprietes : 

La propriete font definit la police de caracteres a utiliser lors du dessin. La syntaxe est identique a celle de la propriete 
de style CSS font. La valeur par defaut est lOpx sans-serif. 

Exemple 

contexte . f ont = "20pt Arial"; 

La propriete textAiign determine I'alignement du texte. Les valeurs possibles sont : 

• left pour un alignement a gauche. 

• right pour un alignement a droite. 

• center pour un alignement centre. 

• start (defaut) pour I'alignement du debut de ligne pour I'ecriture de gauche a droite. 

• end pour I'alignement a la fin de ligne pour les ecritures de droite a gauche. 
Exemple 

contexte . textAiign = "left"; 

Et enfin, la propriete textBaseiine definit la ligne de reference de I'ecriture du texte. Les valeurs possibles, illustrees 
par I'image suivante, sont top, middle, alphabetic (defaut) et bottom. 




Exemple d'ajout de texte : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<canvas id="dessin" width="240px" height="200px" style="border : 
lpx solid black"> 

Votre navigateur ne supporte pas la balise canvas 
</canvas> 

<script type="text / javascript "> 
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var canvas = document . getElementBy Id ( "dessin" ) ; 

var contexte = canvas . getContext ( "2d" ) ; 

contexte . textBaseline = "alphabetic"; 

contexte . textAlign = "left"; 

contexte . font = '36px "Segoe UI" bold'; 

contexte. fillText ("Html5 canvas", 10, 70); 

contexte . font = "80px "Segoe UI" bold"; 

contexte. strokelext ("Html5", 10, 150); 

</script> 

</body> 

</html> 
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Ajouter de I'ombre 



Les effetS d'ombre SOnt ajOUteS par les proprieties shadowOff setX, shadowOf f setY, shadowBlur et shadowColor. 



Les proprietes shadowOf fsetx=vaieur et shadowOf fsetY=vaieur indiquent le deport de I'ombre par rapport a I'axe 
horizontal et vertical. Des valeurs negatives peuvent etre reprises pour une ombre dirigee vers le haut et vers la 
gauche. Les valeurs positives induisent un effet d'ombrage vers le bas et vers la droite. La valeur par defaut est pour 
les deux proprietes. 

La propriete shadowBiur=vaieur determine I'effet de dispersion de I'ombre. La valeur par defaut est 0. 

La propriete shadowCoior=couieur indique la couleur de I'effet d'ombrage. Cette couleur est indiquee selon la notation 
des feuilles de style CSS. Par defaut, la couleur est le noir (black). 

La tentation est grande d'ajouter un effet d'ombre au texte de I'exemple precedent : 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




</head> 




<body> 




<canvas id="dessin" width="240px' 


height="200px" style="border : 


Ipx solid black"> 




Votre navigateur ne supporte pas 


la balise canvas 


</canvas> 




< script type="text / javascript "> 




var canvas = document . getElementBy Id ( "dessin" ) ; 


var contexte = canvas . getContext 


"2d" ) ; 


contexte . textBaseline = "alphabetic"; 


contexte . textAlign = "left"; 




contexte . font = '36px "Segoe UI" 


bold' ; 


contexte . shadowOf fsetX = 5; 




contexte . shadowOf fsetY = 5; 




contexte . shadowBlur = 5; 




contexte . shadowColor = "black"; 




contexte . fillText ("Html5 canvas", 


10, 70); 


contexte . font = "80px "Segoe UI" 


bold"; 


contexte . strokelext ("Html5", 10, 


150) ; 


</script> 




</body> 




</html> 
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Transformations 



Jusqu'a present le dessin initie par la balise <canvas> etait statique. Les differentes transformations rendent les 
elements dynamiques. 

Translation 

La methode translate (x, y) deplace un element du canevas de son origine vers un nouveau point dont les 
coordonnees sont fournies par x et y. 

Rotation 

La methode rotate (angle) est utilisee pour faire tourner un element autour de son point d'origine. Le parametre angle 
est exprime en radians et effectue la rotation dans le sens des aiguilles d'une montre. 

Notons que le point central de la rotation est toujours le point d'origine. Pour modifier ce dernier; il est necessaire de 
deplacer I'element a I'aide de la methode translate. 

Mise a I'echelle 

La mise a I'echelle permet d'agrandir ou diminuer la taille des elements dans le canevas. On utilise la methode scale 
(x,y) ou x est le facteur d'echelle dans la direction horizontale et y celui de la direction verticale. Les deux parametres 
doivent etre des nombres positifs. Les valeurs plus petites que 1.0 reduisent la taille de I'unite, et les valeurs plus 
grandes que 1.0 augmentent la taille de I'unite. Positionner le facteur d'echelle a exactement 1.0 n'a aucun effet sur la 
taille de I'unite. 

Ainsi, comme I'unite de base est le pixel, si Ton applique un facteur d'echelle de 0.5, I'unite resultante devient 0.5 pixels 
et les formes dessinees diminuent a la moitie de leur taille. D'une maniere similaire, en positionnant le facteur d'echelle 
a 2.0 on augmente la taille de I'unite et celle-ci devient alors egale a deux pixels. Le resultat est que les formes 
dessinees augmentent de deux fois leur taille. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<script type="text / javascript "> 
function draw() ( 

var ctx = document . getElementBy Id (' canvas '). getContext (' 2d' ) ; 
ctx . translate (75, 75) ; 
for (i=l; i<6; i++) { 
ctx . save ( ) ; 

ctx.fillStyle = ' rgb (255, ' +Math . abs ( 306-51*i) +' , ) ' ; 

for ( j = 0; j < i * 6 ; j++) { 

ctx. rotate (Math. PI *2/ (i*6) ) ; 

ctx . beginPath ( ) ; 

ctx. arc (0, i*12 . 5, 5, 0, Math . PI *2 , true) ; 

ctx. fill () ; 

} 

ctx . restore ( ) ; 

} 

} 

</script> 

<style type="text/css "> 

canvas { border: lpx solid black;} 

</style> 

</head> 

<body onload="draw ( ) ; "> 

<canvas id="canvas" width="150" height=" 150 "></canvas> 

</body> 

</html> 
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Preambule 

Le Html5 comporte de fagon native de nombreuses interfaces de programmation (Application Programming Interface ou 
API). Citons : 

• La geolocalisation, qui permet de localiser I'utilisateur par ses coordonnees de longitude et latitude. 

• Des super cookies, avec Web Storage qui permettra un stockage plus important de donnees dans le navigateur. 

• L'utilisation des applications Web hors connexion apres la mise en cache des ressources necessaires. 

• Les Workers, qui peuvent executer des taches de fond en parallele du programme JavaScript principal dans un 
environnement totalement separe de la page. 

• Les Websockets, qui permettent d'etablir une communication bidirectionnelle asynchrone entre le navigateur et 
le serveur. 

• Le glisser-deposer (drag/drop) en natif dans le navigateur. 

• L'attribut contentEditabie, qui permet I'edition en ligne du contenu d'un element. II fait apparaTtre un editeur 
WYSIWYG basique qui permet done d'editer directement le contenu dans la page. Toutes les modifications 
apportees par I'utilisateur pourront etre traitees a la fin de I'edition. 

• Etc. 

La plupart depassent largement le cadre de cet ouvrage. Interessons-nous neanmoins a la fonction de geolocalisation. 
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Concept et utilite 



La geolocalisation (geolocation) est un procede permettant de positionner un objet ou une personne sur une carte ou 
un plan. Au niveau du Web, la geolocalisation permet a un site de connaitre les coordonnees geographiques (longitude 
et latitude) d'un utilisateur. 

Ce concept n'est pas nouveau sur la toile. La nouveaute reside dans le fait que cette fonctionnalite est incluse de fagon 
native dans le Html5 soit sans bibliotheque ou API supplemental. 

Les applications de la geolocalisation peuvent etre multiples. Un site commercial peut ainsi proposer des revendeurs de 
son produit, situes a proximite immediate de I'endroit ou reside I'utilisateur. Un reseau social peut vous indiquer des 
affilies correspondant a votre profil qui resident pres de chez vous. Un moteur de recherche peut egalement vous 
proposer des hotels, restaurants ou lieux de loisirs dans les environs d'une ville etape. En fonction de votre lieu de 
residence, un site de vente en ligne international pourra afficher les prix dans votre devise ou afficher les dates selon 
votre modele habituel (jj/mm/aaaa ou mm/jj/aaaa). 
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Le fonctionnement 



D'ou proviennent ces donnees qui permettent de vous localiser ? 

Tout d'abord, de I'adresse IP de I'utilisateur. C'est une procedure simple de connaitre I'adresse IP de I'utilisateur. II 
suffit alors de consulter des registres d'attribution pour connaitre votre adresse physique. La precision de la 
geolocalisation est parfois sujette a surprise car, dans certains cas, c'est I'adresse de votre fournisseur d'acces qui 
sera reprise. 

Ensuite, de votre reseau wifi. La geolocalisation de votre reseau wifi s'obtient par triangulation par rapport a des 
points d'acces ou bornes wifi aux alentours. Rappelez-vous qu'en mai 2010, la societe Google a revele que ses 
vehicules charges de prendre des photos pour son application Google Street View engrangeaient egalement des 
informations relatives aux reseaux wifi rencontres. La geolocalisation ainsi obtenue est assez precise, surtout dans les 
zones urbaines. 

Et enfin, pour certains telephones cellulaires de la derniere generation (iPhone), par les coordonnees GPS. La precision 
de la geolocalisation est alors quasi absolue. 
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Les navigateurs 



La plupart des navigateurs reconnaissent cette fonctionnalite de geolocalisation en Html5. Citons Chrome5 + , Firefox 
3.6+, Operal0.6 et Safari 5 + . Internet Explorer 8 et 9 ne reconnaissent pas la geolocalisation. 

II faut cependant signaler que I'etat d'avancement de I'inclusion de cette API varie grandement d'un navigateur a 
I'autre. 
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Protection de la vie privee 



Cette geolocalisation peut se reveler assez indiscrete et tous les utilisateurs ne souhaiteront pas partager leurs 
donnees de geolocalisation. Le W3C emet des regies d'utilisation tres strictes. 

La geolocalisation doit etre une demarche volontaire de I'utilisateur. Avant toute procedure de geolocalisation de la 
part d'un site, une fenetre popup ou un bandeau doit apparaitre dans le navigateur demandant I'autorisation expresse 
de I'utilisateur. 

Capture d'ecran de la demande de partage de la localisation dans Firefox 4 : 



www,' "'' ' veut savoir ou vqus vdus trouvez. 



Partager 5a localisation 




La meme fenetre d'autorisation dans Safari : 




' V 

Le site web * http;//www. » aim era it utilizer votre 

localisation actuelle. 

□ Demander I'autorisation seulement une fois toutes les 24 heures 



Autoriser Ne pas autoriser 



Quand un navigateur procede a une geolocalisation, les informations echangees se realisent par I'intermediaire d'une 
connexion chiffree. 

A aucun moment le nom et I'adresse du site Web visite ne doivent etre partages. 

L'identifiant client aleatoire attribue pour une procedure de geolocalisation doit expirer apres un delai de deux 
semaines. 



Faisons le voeu que ces procedures soient scrupuleusement respectees par tous les intervenants de la toile. 
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Longitude et latitude 

Cette bibliotheque (API) de geolocalisation fait largement appel au JavaScript. 

Le JavaScript position, coords retourne les coordonnees mais aussi bien d'autres valeurs : 

• position. coords . longitude renvoie la longitude de la position. 

• position. coords. latitude renvoie la latitude de la position. 

• position. coords . altitude retourne I'altitude de la position. 

• position . coords . accuracy indique la precision des coordonnees. 

• position . coords . aititudeAccuracy fournit la precision de I'altitude. 

• position. coords. heading donne la position en degre par rapport au nord. 

• position . coords . speed qui correspond a la vitesse de I'utilisateur par rapport a sa derniere position. 

Ces valeurs ne sont pas encore toutes presentes dans les navigateurs mais donnent une idee du potentiel de cette 
application. 

Elaborons un exemple qui retourne la longitude et la latitude : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<script type="text / javascript "> 
if (navigator . geolocation) { 

navigator .geolocation . getCurrentPosition ( function (position) { 
var latitude = position . coords . latitude; 
var longitude = position . coords . longitude; 

document . getElementByld (" latitude" )■ innerHTML = latitude; 
document . getElementBy Id (" longitude" ). innerHTML = longitude; 

}> ; 

} 

else { 

alert ("Votre navigateur ne supporte pas la geolocalisation"); 
} 

</script> 

</head> 

<body> 

<hl>Html5 geolocalisation</hl> 

Latitude : <span id="latitude">Loading. . . </span><br> 
Longitude : <span id=" longitude ">Loading ... </span> 
</body> 
</html> 
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HtmlS geolocalisation 



Latitude : 48.858333 
Longitude : 2.294444 



% 4 



£% Pour preserver les donnees privees de I'auteur, les coordonnees de longitude et de latitude correspondent a 
celles de la tour Eiffel. 

Le script est disponible dans I'espace de telechargement reserve a cet ouvrage. 

Pour illustrer I'aspect encore experimental de cette API, le script fonctionne en local sous Firefox 3.6+ et Opera 10. 6+. 
Pour Chrome, la page doit etre en ligne et Safari (sous Windows) bloque sur I'ecran d'accueil. 

Explications du script : 

<script type="text/ javascript"> 
</script> 

Les balises qui introduisent un script JavaScript : 

if (navigator . geolocation) { 
} 

Le script teste si la fonction de geolocalisation (geolocation) est prise en charge par le navigateur (navigator). 

var latitude = position . coords . latitude; 
var longitude = position. coords . longitude; 

Si c'est bien le cas, la variable latitude est obtenue par position. coords. latitude et la variable longitude par 

position . coords . longitude. 

document . getElementByld ( "latitude" ). innerHTML = latitude; 
document . getElementByld (" longitude "). innerHTML = longitude; 

}) ; 

On reporte dans le Html (innerHTML) la variable latitude a I'interieur dans la balise <span> dotee de I'identifiant Id 

id="iatitude". On procede de meme pour la longitude. 

Else { 

alert ("Votre navigateur ne supporte pas la geolocalisation"); 



Si le navigateur n'accepte pas la geolocalisation, une fenetre d'alerte apparait. 
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Message de la page Web 




Votre navigateur ne supporte pas la g 



is la qeolocalisation 



OK 
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Localisation sur une carte 



Une fois la longitude et la latitude connues, la tentation est grande de reporter cette position sur une carte en faisant 
appel a Google Maps. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<script 

src="http : / /maps . google . com/ maps ?f ile=api& amp; v=2 Samp ; sensor=f alse 

&key=ABQIAAAA8JXbOYDVa4otOLnM95w50BSeC_rwpfX9fQb- 

nbMGMDH8BB4BVRTjxWS14T5WLZf 7TpXaaAtk_SIb-Q" 

type="text/ javascript"> 

</script> 

<script type="text / javascript "> 

var map; 

var geocoder; 

function init ( ) ( 

map = new Gmap2 (document . getElementByld ( "carte" )) ; 
map . setCenter (new GLatLng(34, 0), 1); 
geocoder = new GclientGeocoder ( ) ; 
} 

function sur_carte ( response ) { 
map . clearOverlays ( ) ; 

if ((response I I response . Status . code != 200) { 

alert ( "Desole, nous ne pouvons geolocaliser votre adresse."); 

} 

else { 

place = response . Placemark [ ] ; 

point = new GlatLng (place . Point . coordinates [ 1 ] , 

place. Point. coordinates [ ] ) ; 

marker = new Gmarker (point ) ; 

map . setCenter (point , 13); 

map . addOverlay (marker) ; 

} 

} 

function geolocalisation ( ) { 

var adresse = document . form. latitude .value + "," + 

document . form . longitude . value 

geocoder . getLocations (adresse, sur_carte) ; 

} 

if (navigator . geolocation) { 

navigator .geolocation . getCurrentPosition ( function (position) { 

latitude = position . coords . latitude; 

longitude = position . coords . longitude; 

document . form . longitude . value = longitude; 

document . form . latitude . value = latitude; 

geolocalisation () ; 

}) ; 

} 

else { 

alert ("Votre navigateur ne supporte pas la geolocalisation"); 
} 

</script> 
</head> 

<body onload=" init ( ) " > 

<div style="text-align : center ; width: 400px;"> 
<hl>HTML 5 Geolocalisation</hl> 
<form name="form" action=""> 
<p> 

Longitude : <input type="text" name="longitude" value="" 
size="20"><br> 

Latitude : <input type="text" name="latitude" value="" size="20"> 

</p> 

</f orm> 
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<div id="carte" style="width : 400px; height: 250px; "></div> 

</div> 

</body> 

</html> 



HTML 5 - Moiilla Firefox4.0 Beta 6 
Fichier Edition Affichage Historique Marque- pages Outils ? 



HTML 5 



Longitude : 2.294444 




O ^kmnee^ cartographique 



cartograpMqjes ©2D10 Tele Atlas - CfenrJiiions d'tiHisatmn 



Termine 



Pour preserver les donnees privees de I'auteur, les coordonnees de longitude et de latitude correspondent a 
celles de la tour Eiffel. 



La page Html et le script sont disponibles dans I'espace de telechargement. 
Quelques explications : 

La geolocalisation s'effectue comme au point precedent par le script suivant 

if (navigator . geolocation) { 

navigator .geolocation . get Cur rent Posit ion (function (position) { 

latitude = position . coords . latitude; 

longitude = position . coords . longitude; 

document . form . longitude . value = longitude; 

document . form. latitude . value = latitude; 

geolocalisation () ; 

)); 

} 

else { 

alert ("Votre navigateur ne supporte pas la geolocalisation"); 



Les coordonnees trouvees sont envoyees a la fonction geolocalisation. Cette derniere fait a son tour appel a la 
fonction sur_carte qui exploite la bibliotheque (API) Google Maps Api. Pour plus d'informations sur I'insertion d'une 
carte Google maps dans un site, consultez I'adresse http://code.google.com/intl/fr-FR/apis/maps/. 



- 2- 



© ENI Editions - All rights reserved - Algeria Educ 



) ENI Editions - All rights reserved - Algeria Educ - 3 - 



Concept des feuilles de style 



Les feuilles de style sont des ajouts de code au langage Html qui vont prendre en charge la presentation du document 
ou de I'application Web. 



Application Web 



Balises HtmIS 



Feuilles de style CSS 



Contenu 



Presentation 



Le concept de feuilles de style repose sur le principe de la separation du contenu et de la presentation dans 
I'elaboration d'applications Html. 

Ainsi un meme contenu pourrait etre utilise, selon la feuille de style adoptee, pour un affichage sur des medias aussi 
divers qu'un ecran traditionnel, I'ecran d'un ordinateur de poche ou d'un mobile, des feuilles de papier imprimees, une 
barrette braille, etc. 

C'est ainsi tout le domaine de la presentation qui est pris en charge par les feuilles de style, le role du Html se limitant 
alors a la structure et a I'encodage de I'information brute. 
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Utilite des feuilles de style 



Les feuilles de style represented un outil puissant dont les implications dans la conception des applications Web sont 
multiples. 

Un passage oblige en Html5 

Le Html5 va au bout du concept de la separation du contenu et de la presentation. Presque tous les elements de 
presentation des balises ou des attributs presents dans le Html 4.0 ont ainsi disparu. Un document Html5 sans feuille 
de styles pour en assurer la presentation n'est alors plus qu'une morne structure du contenu textuel. Citons, par 
exemple, I'absence en Html5 de I'attribut border qui assurait la presence d'une bordure a la balise de tableau <tabie>, 
rendant ainsi la representation des tableaux problematiques en pur Html. 

Les feuilles de style vont beaucoup plus loin dans le domaine de la presentation que les anciennes balises du Html. De 
par leur richesse et leur variete, elles ont profondement modifie I'aspect visuel des applications en decuplant la 
creativite des webgraphistes. 

Une simplification du code 

II semble deja bien lointain, le temps ou le code source des pages Web etait un imbroglio incomprehensible de 
tableaux imbriques et d'astuces en tout genre pour assurer une presentation agreable. 

Les feuilles de style ont permis d'alleger considerablement le code source en le rendant plus lisible et plus accessible. 
Une maintenance de site facilitee 

De par I'utilisation croissante du Web comme source d'information, la dimension des sites Web a considerablement 
augmente en termes de nombre de pages par site. II n'est plus rare de rencontrer des sites de plusieurs centaines de 
pages. Une mise a jour graphique peut ainsi constituer un travail gigantesque. 

Plutot que de devoir reprendre et retravailler, une par une, chacune des pages du site, les feuilles de style permettent, 
par la seule modification d'un unique fichier, de modifier la presentation graphique de I'ensemble d'un site, tout en lui 
assurant une coherence graphique. 

Une voie vers I'accessibilite 

Depuis quelques annees, I'accent a ete mis sur I'accessibilite des sites Web pour les personnes presentant des 
deficiences visuelles. Beaucoup de concepteurs de sites ont pris conscience de I'importance du Web comme media 
d'informations irremplagable pour ces personnes comportant un handicap de la vue. Pour rendre un site accessible, soit 
procurer aux malvoyants un acces immediat a la meme information et au meme volume d'information, I'usage des 
feuilles de style s'avere etre un outil essentiel. 

Sans entrer dans les details, les feuilles de style offrent, par exemple, la possibility d'afficher une page de texte avec 
des caracteres plus grands et done plus lisibles. 
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Bref historique 



Lorsque, debut 1991, Tim Berneers-Lee inventa le Web, le langage Html etait principalement congu pour faciliter 
I'echange d'informations entre scientifiques. Les premieres pages Web etaient pour le moins austeres avec leur fond 
de page gris, un texte de couleur noire et structure uniquement avec des titres et des listes. II fallut meme attendre 
quelques annees pour voir apparaitre les premieres images... en 256 couleurs ! On etait loin de nos applications Web 
actuelles. 

Assez rapidement cependant, des 1994, devant les relatives faiblesses du Html en matiere de presentation, I'idee 
d'adjoindre au Html des styles, comme dans les logiciels de traitement de texte, fit son apparition. 

Lorsqu'en 1995 le W3C (pour World Wide Web Consortium) commenga a fonctionner, une de ses premieres realisations 
concretes fut la publication en novembre 1995 d'une premiere ebauche de travail {working draft) sur les feuilles de 
style. Ce document devint une recommandation officielle le 17 decembre 1996 sous le nom de "Feuilles de style en 
cascade niveau 1" {Cascading Style Sheets, level 1) ou de maniere abregee CSS1. 

Dans la foulee, un groupe de travail specifique fut cree avec comme mission d'etendre le concept des feuilles de style. 
Une nouvelle recommandation fut publiee le 12 mai 1998 sous le vocable CSS2. 

Quelques corrections et des extensions mineures sont proposees courant 2006 sous la denomination CSS2.1. 

Depuis 2009, il est beaucoup question des CSS3. Mais on ne peut plus parler de recommandation CSS3 car le groupe 
de travail a scinde la specification en une multitude de modules qui suivent chacun leur evolution dans le temps. Citons 
le module CSS3 des couleurs {CSS Color Module Level 3), le module CSS3 de texte {CSS Text Level 3), le module qui 
s'occupe des arriere-plans et des bordures {CSS Backgrounds and Borders Level 3), etc. 

Les differentes marques de navigateurs portent un interet evident pour ces nouvelles CSS3 et les integrent 
rapidement. Parfois, celles-ci sont meme implantees de fagon provisoire en attendant la specification definitive. 
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Compatibility avec les navigateurs 



On peut considerer que les feuilles de style CSS1 et CSS2 sont bien reprises par les navigateurs presents sur le 
marche, meme s'il subsiste quelques bemols et bugs dans les navigateurs plus anciens. 

Pour les navigateurs de notre etude (pour rappel, Interner Explorer 9, Firefox 3.6+, Safari 5 + , Chrome 7+ et Opera 
10. 6+), les feuilles de style CSS1 et CSS2 ne posent plus de problemes de compatibilite. 

La situation est loin d'etre la meme pour les CSS3 (voir chapitre "Les feuilles de style CSS3"). II importe des a present 
d'insister sur le cote nouveau voire experimental de ('incorporation de ces feuilles de style CSS3 dans les navigateurs 
modernes. Ainsi, une propriete est reprise par tel navigateur mais pas par un autre, une propriete n'est incorporee que 
dans la version X d'un autre ou encore chaque navigateur traite celle-ci avec un prefixe particulier. Nous avons 
cependant veille a fournir un code avec une compatibilite maximale meme si I'etude de ces CSS3 est encore ardue. 

Ne manquez cependant pas de percevoir I'avancee marquante des CSS3 dans la presentation du document car les 
nouveautes sont nombreuses et devraient modifier radicalement I'aspect des applications Web dans les prochaines 
annees. Citons I'arrivee de la typographie avec les polices personnalisees, la presentation d'un contenu textuel en 
colonnes multiples, les ombres sur le texte et les elements boite, les bords arrondis, les degrades de couleurs, la 
transparence de celles-ci, etc. 



© ENI Editions - All rights reserved - Algeria Educ 



- 1 - 



Outils pour les feuilles de style 



Tout comme pour I'etude du Html5, un simple editeur de texte brut comme NotePad ou SimpleText fait parfaitement 
I'affaire. D'autres petits logiciels d'edition peuvent etre utilises mais I'important est d'avoir du texte brut sans aucune 
mise en forme. 

Parallelement au validateur de documents Html (Presentation du Html5 - La validation du code Html5), il existe 
egalement un validateur dedie aux feuilles de style. 

Le validateur en ligne du W3C pour les CSS (http://jigsaw.w3.org/css-validator/) est un outil de grande valeur et dont 
les qualites sont unanimement reconnues. II permet de fournir des pages parfaites, scrupuleusement respectueuses 
des normes editees par le W3C. 




CSS Validation Service 



Verifies vps feuilles He style CSS el us documenjs HTML styles nvec CSS 



par crwge merit de Fichier par Sals re Directs 




Cependant, son usage ne se revele pas tres adapte dans le cadre d'un apprentissage. La conception de ce validateur 
a ete guidee par le principe de la stricte separation entre la structure et la presentation. Ce faisant, il presuppose que 
les informations de presentation contenues dans le document Html sont integrees par des feuilles de style externes 
(Validation par telechargement du fichier vers le serveur et validation par saisie directe), ce qui est rarement adopte 
lors d'un apprentissage. En effet, I'encodage des feuilles de style sous forme de code CSS interne au document Html se 
revele plus abordable et plus convivial. Le validateur du W3C offre bien la possibility de valider un fichier Html5 avec 
CSS mais dans ce cas, le fichier doit etre present sur un serveur Web (Validation par URI), ce qui reclame une 
procedure longue et peu pratique pour une formation. 

A I'heure actuelle, le validateur n'integre pas encore les feuilles de style CSS3. 

Le validateur CSS du W3C se revele done etre plus un outil destine aux professionnels qu'aux apprentis concepteurs. 
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La declaration de style CSS 



La declaration d'un style s'effectue par le binome propriete: vaieur; 
Exemple 

background-color: red; 

Ce qui pourrait se lire : "mettre la couleur de I'arriere-plan a la vaieur rouge". 
Detaillons cette declaration : 

• La propriete identifie ce qui sera defini dans le style adopte. Ces proprietes sont enumerees dans les 
specifications CSS. II existe de nombreuses proprietes portant, par exemple, sur la police de caractere {font), 
sur le texte (rexr), sur I'arriere-plan (background), sur la bordure (border), etc. 

• La propriete est separee de sa vaieur par un double point. 

• Les espaces sont permis. Ainsi certains auteurs ont pris I'habitude de mettre un espace entre le double point 
et la vaieur pour une meilleure lisibilite du code. 

• La vaieur identifie la nature de I'effet de style souhaite. La vaieur s'exprime par un mot-cle, un pourcentage, 
une grandeur en fonction de la propriete a laquelle el le est assignee. 

• Une declaration de style se termine toujours par un point-virgule. 

• II est possible de definir plusieurs declarations de style pour un selecteur. Par exemple : proprietei : vaieur; 
propriete2 : vaieur; propriete 3 : vaieur ; . 
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Les selecteurs de base 



1. Les selecteurs de balise 

Dans le chapitre precedent, nous avons defini les feuilles de style comme des ajouts au code Html5. 

La propriete de style vient done "s'accrocher" a un element ou une balise Html. C'est ce qu'on appelle un selecteur. 

La syntaxe d'un selecteur de balise est la denomination de la balise suivie de la declaration de style comprise entre 
des accolades ouvrantes et fermantes. 

selecteur { declaration de style} 

Exemple 

div { background-color: red;} 

Remarquez que Ton reprend simplement la denomination de la balise sans ses signes inferieur (<) et superieur (>). 
Done uniquement le texte de la balise. 

Ce qui pourrait se lire : "appliquer a toutes les balises de division <div> I'effet de style decrit entre les accolades". 

II est aussi possible d'affecter le meme effet de style a differents selecteurs de balise. Dans ce cas, chacune des 
balises concernees devra etre separee par une virgule. 

Soit : 

hl,h2,h3 { declaration de style} 

Ce qui signifie que les balises <hl>, <h2> et <h3> auront le meme effet de style decrit entre les accolades. 

2. Les selecteurs de classe 

Nous avions vu jusqu'a present que les feuilles de style s'appliquaient a un selecteur et que ce selecteur pouvait etre 
une balise Html. 

Mais cette seule notion de selecteur est trop limitative. II faudrait pouvoir appliquer plusieurs styles differents a une 
meme balise. C'est ce qu'apportent les classes. Avec celles-ci, le concepteur pourra, en quelque sorte, definir lui- 
meme ses propres selecteurs. 

La definition d'une classe est : 

. nom_de_la_classe { declaration ( s ) de style} 

Soit un point, suivi du nom que vous voulez attribuer a la classe, suivi de la declaration de style entre des accolades. 
Exemple 

.rouge { background-color: red;} 

Cette definition de classe pourra etre utilisee pour n'importe quelle balise du document ou de I'application. D'ou le 
terme de classe universelle. 

Cependant, la classe ainsi definie n'a aucune influence aussi longtemps qu'elle n'est pas appelee dans le document. 
L'appel de la classe de style se fait par : 

<balise class="nom_de_la_classe"> 

Exemple 

<div class="rouge"> ... </div> 
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Commentaires : 



• Le point du selecteur de classe n'est pas utilise pour I'appel de la classe class (erreur frequente). 

• Une meme classe peut etre appelee plusieurs fois dans le document Html. Par exemple : 

<div class="rouge">Item Kdiv> 

<div>Item 2<div> 

<div class="rouge">Item 3<div> 

Ici, seules les divisions avec la classe rouge auront un arriere-plan de couleur rouge. 

• On peut melanger les declarations class et id. 

• Un nom de classe peut comporter des lettres, des chiffres, le tiret et le caractere de soulignement. Le premier 
caractere ne peut etre un nombre, un tiret ou un caractere de soulignement. Les espaces sont a eviter ainsi 
que les noms reserves du JavaScript. 

II existe une autre fagon de definir une classe, mais elle est moins pratique (et done moins utilisee) que la 
precedente : 

nom_balise . nom_de_la_classe (declaration (s) de style} 

Soit un nom de balise, suivi d'un point, suivi du nom que vous voulez donner a la classe, suivi de la declaration de 
style entre des accolades. 

Exemple 

blockquote . rouge { background-color: red;} 

Avec cette definition de classe, celle-ci ne pourra etre appliquee qu'a la seule balise designee, soit ici blockquote. 

3. Les selecteurs d'identifiant 

Le selecteur id, aussi appele identifiant id, permet d'appliquer une feuille de style (comme le selecteur class) mais il 
ne pourra etre appele qu'une seule fois dans le document Html. 

Le selecteur id permet done d'identifier un element unique dans la page. Cette distinction prend toute son 
importance quand on fera appel a du JavaScript ou du Dhtml. En effet, id ne pouvant etre appele qu'une fois dans le 
document par un element, celui-ci pourra etre traite comme un objet unique qui sera par la suite manipule par le 
JavaScript. 

La definition d'un selecteur id est : 

#nom_de_l' identifiant { declaration ( s ) de style} 

Soit un diese (#), suivi du nom que vous voulez donner a I'identifiant id, suivi de la declaration de style entre des 
accolades. 

Exemple 

#rouge { background-color: red;} 

Cette selection ne pourra etre utilisee qu'une seule fois dans le document. 

Le selecteur ainsi defini n'a aucune influence, aussi longtemps qu'il n'est pas appele dans le document. 
L'appel se fait par : 

<balise id="nom_de_l' identif iant"> 
Exemple 
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<div id="rouge"> . . . </p> 



Commentaires 

• Un identifiant id ne peut figurer qu'une fois dans le document Html. Ainsi, ce qui suit serait incorrect ! 

<p id="rouge"> ... </p> 
<p id="rouge"> ... </p> 

• Un document peut bien entendu comporter plusieurs identifiants id de noms differents mais ils ne pourront 
etre appeles chacun qu'une seule fois. 

• On peut melanger les declarations class et id. 

• Un nom d'identifiant peut comporter des lettres, des chiffres, le tiret et le caractere de soulignement. Le 
premier caractere ne peut etre un nombre, un tiret ou un caractere de soulignement. Les espaces sont a 
eviter ainsi que les noms reserves du JavaScript. 

II existe une autre fagon de definir une classe mais elle est moins pratique (et done moins utilisee) que la 
precedente : 

nom_balise#nom_de_l' identifiant {declaration (s) de style} 

Soit un nom de balise, suivi d'un diese (#), suivi du nom que vous voulez donner a I'identifiant, suivi de la declaration 
de style entre des accolades. 

Exemple 

blockquote#rouge { background-color: red;} 

Avec ce selecteur, celui-ci ne pourra etre applique qu'a la seule balise <biockquote> designee par I'identifiant rouge. 

ffk Signalons que les feuilles de style CSS3 ont ajoute de nombreux selecteurs. Ceux-ci seront abordes en detail 
au chapitre Les feuilles de style CSS3 - Les selecteurs CSS3. 
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Les commentaires 



Tout langage de description ou de programmation permet I'insertion de commentaires pour la comprehension du code 
et sa maintenance ulterieure. Dans une feuille de style CSS, un commentaire commence par les caracteres barre 
oblique et etoile (soit /*) et se termine par etoile et barre oblique (soit */). On peut placer des commentaires n'importe 
ou dans la feuille de style, excepte a I'interieur d'une chaine de caracteres. 

Exemole 

I* Ceci est un commentaire */ 
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Les unites de mesure 



Les feuilles de style CSS permettent d'utiliser de nombreuses unites de mesure soit en pouces (inches), en 
centimetres, en millimetres, en points, en picas, en pixels et en pourcentage. 

On distingue les valeurs relatives qui peuvent varier selon I'ordinateur utilise et les valeurs absolues qui restent 
constantes quel que soit le materiel ou le software utilise. 



Les valeurs absolues sont : 



Unite 


Nom 


Description 


Valeur 


Exemple 


Pt 


point 


72 pt = 1 inch 


entier 


48pt 


PC 


pica 


1 pc = 12 pt 


reel 


4.5pc 


mm 


millimetre 


1 mm = .24 pc 


entier 


60mm 


cm 


centimetre 


1 cm = 10 mm 


entier 


6cm 


in 


inch 


1 in = 2.54 cm 


reel 


O.lin 



Les valeurs relatives sont : 



Unite 


Description 


Valeur 


Exemple 


em 


Unite relative se 
basant sur la taille de 
police par defaut de la 
page. 


reel 


1.8em 


ex 


Unite relative a la 
hauteur de la 
minuscule de I'element 
selectionne. 


reel 


1.3ex 


px 


Le pixel est la plus 
petite partie d'une 
image. Depend de la 
resolution d'ecran. 


entier 


220px 


% 


Pourcentage 


entier 


80% 



Commentaires 



• Les unites de mesure sont toujours notees par une abreviation comportant deux lettres. 

• II ne peut y avoir d'espace entre la valeur et I'unite. Si un espace est mis entre la valeur et I'unite, la feuille de 
style ne sera pas acceptee et ne sera done pas affichee. 

• Certaines proprietes acceptent des valeurs negatives. 

• II est generalement recommande d'utiliser I'unite em pour decrire la taille des polices de caracteres pour une 
plus grande stabilite entre les differents systemes d'exploitation et navigateurs. 
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La notation des couleurs 



Les feuilles de style CSS proposent de multiples notations pour declarer une couleur. Soit : 

• La notation hexadecimale classique soit #ffcc00. Cette maniere est deja bien connue de ceux qui sont 
habitues aux couleurs en Html. El le definit la couleur, ou plutot ses trois composantes rouge (r pour red), vert 
(g pour green) et bleu (b pour blue), via une notation hexadecimale de type #rrggbb. 

• La notation hexadecimale abregee soit #fd3. Cette notation particuliere permet de gagner quelques 
caracteres. Chaque chiffre est alors implicitement duplique. Par exemple, #fd3 correspond a la notation 
classique #ffdd33. On comprend done qu'on ne pourra pas abreger une couleur comme #cfe4f5. 

• La notation decimale soit, par exemple, color : rgb(0, o, 255) . Le code RGB (RVB pour les francophones) de la 
couleur n'est plus encode en valeur hexadecimale mais par un nombre entier compris entre et 255. C'est 
done I'equivalent decimal de la notation hexadecimale. 

• La notation en pourcentage soit, par exemple, color : rgb(25%, 50%, o%) . La valeur 0% signifie I'absence de la 
composante, 100% qu'elle est a son maximum. 

• Les mots-cles soit, par exemple, color: red. Ces couleurs, au nombre de 17, sont designees par un nom en 
anglais et constituent les couleurs basiques. On y retrouve : green (vert), yellow (jaune), blue (bleu moyen), 
orange (orange), white (blanc), red (rouge), black (noir), maroon (brun marron), lime (vert citron), aqua 
(turquoise), teal (cyan fonce), navy (bleu marine), olive (olive), fuchsia (fuchsia), purple (pourpre), silver (gris 
clair) et gray ou grey (gris fonce). 

A ces notations, la specification CSS3 a ajoute : 

• La notation RGBa, qui obeit aux memes regies de fonctionnement que la notation classique RGB, mis a part 
qu'une composante est ajoutee a la valeur: rgb (0,0,0). Celle-ci devient done rgba (0, o, o, 0) . La derniere 
valeur indiquant le degre d'opacite ou de transparence entre et 1. 

• La notation HSL (Hue Saturation Luminance), qui correspond a la notation TSL en frangais (Teinte Saturation 
Luminosite). La notation HSL consiste en trois valeurs. La premiere est exprimee en degres de 0° a 359° (mais 
le symbole degre n'apparait pas dans la notation). Elle correspond a une couleur dans la roue chromatique : 
le rouge (0°), le jaune (60°), le vert (120°), le cyan (180°), le bleu (240°) et le magenta (300°). Les secondes 
et troisiemes valeurs sont exprimees en pourcentage et notent respectivement la saturation et la luminosite. 
Par exemple, color : hsi(0, ioo%, 50%) pour le rouge. 

• La notation HSLa, qui ajoute une valeur comprise entre et 1 pour la transparence ou I'opacite. Par exemple, 

color: hsi(0, 100%, 50%, 0.5) pour un rouge semi-transparent. 

Pour vous aider dans le codage des couleurs, les sites suivants vous seront d'une grande utilite : 

- http://code-couleur.com/ 

- http://fr.wikipedia.org/wiki/Liste_de_couleurs 

- http://www.ficml.org/jemimap/style/color/couleur.html 

- http://www.webmaster-hub.com/outils/color.html 

- http://www.gratos.be/webmaster/code_couleur.htm 
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Une convention d'ecriture 



Les feuilles de style ne sont pas sensibles a la casse (case insensitive). Peu importe done qu'elles soient ecrites en 
majuscules et minuscules. Cependant, les elements qui ne sont pas sous le controle des feuilles de style comme les 
noms de police ou les URLs peuvent etre sensibles aux majuscules et aux minuscules (case sensitive). 

L'usage veut que Ton encode les feuilles de style en minuscules. 
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Les CSS integrees a un element Html5 

En Html, il est envisageable d'ajouter directement dans le code, une declaration de style a une balise determinee. 
Ce style en ligne se presente ainsi : 

<hl style="color : red; ">Votre titre de niveau K/hl> 

Cette fagon de proceder est cependant a eviter en vertu du principe de la separation du contenu et de la presentation. 

El le peut cependant etre utile pour donner la priorite a une propriete de style par rapport a ce qui a ete specifie dans 
la declaration interne ou externe. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<hl style="font-style : italic; ">Titre K/hl> 

<hl>Titre 2</hl> 

</body> 

</html> 




Fichier Edition Presentation Historique Favoris. Fenetre 



+ file:///C:/Users/Vi C I I Qs Google 



» 



Titre 1 
Titre 2 



Seule la premiere balise <hi> avec la declaration de style est affichee en italique. 
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Les CSS internes au document Html5 



L'utilite principale des feuilles de style CSS est de determiner un style qui s'applique a I'entierete d'une page Html5. 

A cet effet, le code des feuilles de style sera regroupe dans I'en-tete du document, soit entre les balises <head> et 
</head>. On parle alors de style interne. 

La syntaxe se presente alors ainsi : 

<head> 

<style type="text/css"> 
hi { color : red; } 
</style> 
</head> 

Cette declaration de style aura comme effet de mettre en rouge le texte de toutes les balises <hi> du document Html. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

hi { font-style: italic;} 

</style> 

</head> 

<body> 

<hl>Titre K/hl> 
<hl>Titre 2</hl> 
</body> 
</html> 




Titre 1 



Titre 2 




On remarque que tous les titres de niveau 1 de cette page seront en italique. 
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Les CSS externes au document Html5 

II est egalement possible de regrouper les declarations de style dans un fichier externe (distinct) au fichier Html. 
Cette fagon de proceder respecte au mieux la separation du contenu et de la presentation. 

Une des potentialites de ces feuilles de style externe est qu'il est possible de creer une feuille de style qui s'applique 
non pas a une seule page Html mais a I'ensemble des pages d'un site ou d'une application. 

Cette technique met en ceuvre deux fichiers : 

■ Un fichier qui contient la declaration de style. Ce fichier aura une extension .ess. 

• Un document Html qui contient un lien vers le fichier CSS ainsi cree. 

La feuille de style externe 

hi { text-decoration: overline;} 

II faut noter : 

• Que ce fichier en texte brut peut se creer, par exemple, avec le Bloc-notes de Windows. 

• Qu'il contient uniquement des declarations de style. 

• Qu'il ne peut done pas contenir de balises Html et en particulier les balises <styie type="text/css"> ... 
</styie> des feuilles de style internes. 

• On enregistrera ce fichier sous un nom de fichier quelconque avec une extension .ess. Soit ici exemple. ess. 

• Pour la simplicite, ce fichier se situera souvent dans le meme dossier que le document Html (adressage relatif 
ou local). 

Le document Html5 

On ajoutera dans I'en-tete, soit entre les balises <head> et </head>, un lien vers la feuille de style en question. 
<link rel=" stylesheet " type="text/css" href ="exemple . ess "> 
Etudions cette ligne de code : 

• link indique au navigateur que ce qui suit est un lien. 

• rei="styiesheet" precise que ce lien est relatif a une feuille de style. 

• href="exempie.css" est I'ecriture classique d'un lien en Html. 

• Le lien peut etre absolu (commengant par http://...) ou relatif. 

• Rien n'empeche de mettre plusieurs balises <iink> vers des feuilles de style externes differentes. 

• Rien n'empeche non plus d'utiliser egalement une feuille de style interne. 
Exemple 

Le code du fichier exemple. ess est tout simplement : 

hi { text-decoration: overline;} 
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Le code du fichier Html5 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<link rel=" stylesheet " type="text/css" href ="exemple . css"> 

</head> 

<body> 

<hl>Titre de niveau K/hl> 

</body> 

</html> 



Tous les titres hi de toutes les pages faisant reference a cette feuille de style seront surlignes. 




Fichier Edition Presentation Hi:toric|ue Favoris Fenetre 

I » 



fils/Z/G/Users/V C | Q' Google 



Tit re de niveau 1 



ffk Meme si cette methode respecte au mieux les prescriptions du W3C (separation du contenu et de la 
presentation), nous adopterons cependant, dans la suite de cet ouvrage, la technique des feuilles de style 
internes, moins abstraites et plus comprehensibles. 
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CSS importee (@import) 



Une autre facon d'utiliser des feuilles de style externes est d'utiliser @import. 

<style type="text/css"> 
Simport url (exemple . ess) ; 
</style> 

@import est une propriete de style CSS 2 (alors que la balise <iink> est du Html). L'avantage est que Ton pourra non 
seulement I'utiliser pour appeler une feuille de style externe dans un document Html mais aussi pour importer une 
autre feuille de style dans la feuille de style externe. 

Commentaires 

• Les balises <styie> ... </styie> sont necessaires car eimport est une propriete de style (CSS 2). 

• II n'y a pas d'espace entre I'arobase et import. 

• L'adresse de la feuille de style peut-etre globale (http:// ...) ou locale. 

• N'oubliez surtout pas le point-virgule final ! Pour rappel, eimport est une propriete de style CSS. 

• La balise <iink> n'est plus necessaire. 
Le code complet pourrait etre : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

@import url (exemple . ess ) ; 

</style> 

</head> 

<body> 

<hl>Titre de niveau K/hl> 

</body> 

</html> 



Tout comme pour les styles externes, tous les titres <hi> de toutes les pages du site seront surlignes. 
La capture d'ecran est identique a la precedente. 
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La notion de cascade 



A la lecture des points precedents, on constate que Ton peut avoir plusieurs definitions de style soit en ligne, interne(s) 
ou externe(s). En cas de concurrence entre plusieurs elements de style, intervient alors la notion de "cascade" (le 
Cascading de Cascading Style Sheets) ou d'ordre de priorite. 

Le navigateur prend d'abord en consideration les specifications des feuilles de style externes (avec I'extension ess), 
ensuite celles de style internes (soit celles a I'interieur des balises <head>) et ensuite des feuilles de style en ligne 
(celles liees a un element Html5). 

Ainsi, en cas de conflit entre une specification de style definie a la fois dans une feuille de style externe et dans une 
feuille de style interne, e'est la specification de la feuille de style interne qui sera retenue par le navigateur. De meme, 
en cas de conflit entre une feuille de style interne et en ligne, e'est cette derniere qui I'emportera. 

L'ordre croissant de priorite (de la plus basse a la plus haute) est : 

1. Proprietes du navigateur. 

2. Les feuilles de style externes. 

3. Les feuilles de style internes. 

4. Les feuilles de style en ligne. 

Les styles declares dans la feuille de style en ligne ont done bien la plus haute priorite. 



La regie de priorite, pour I'affichage du document par le navigateur, sera d'utiliser la feuille de style la plus 
proche de I'element. 



Exemole 



Definissons une feuille de style externe avec les titres de niveau 1 soulignes et une feuille de style interne avec ces 
memes titres de niveau 1 surlignes. 

Le fichier de style externe (stylel.css) : 



hi { text-decoration: overline; } 



Le document Html5 : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<link rel=" stylesheet " type="text/css" href="stylel . css"> 

<style type="text/css"> 

hi { text-decoration: overline; } 

</style> 

</head> 

<body> 

<hl>Titre de niveau K/hl> 

</body> 

</html> 
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Le titre de niveau 1 est bien affiche comme surligne (text-decoration: overiine), soit avec I'effet du style interne, le 
plus proche de I'etape d'affichage. 

II est cependant possible de passer outre ces regies de priorite par defaut en utilisant la valeur ! important et 
redonner la preseance a une declaration, peu importe les declarations qui peuvent la suivre. 

Exemole 



On donnera la priorite au style externe soit au soulignement par la valeur ! important. 
Le fichier de style externe (style2.css) : 



hi { text-decoration: underline limportant;} 



Le document Html5 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<link rel=" stylesheet " type="text/css" href="style2 . css"> 

<style type="text/css"> 

hi { text-decoration: overiine; } 

</style> 

</head> 

<body> 

<hl>Titre de niveau K/hl> 

</body> 

</html> 
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La notion d'heritage 



Le principe de I'heritage peut etre explique par un rappel du Html et de ses balises imbriquees. 
Soit le bout de code : 

<b>Les editions Eni <i>Collection <code>Ressources 
inf ormatiques<code></ix/b> 

Ressources inf ormatiques sera non seulement sous une police a pas fixe (les balises <code> ... </code>) mais aussi en 
italique (compris dans des balises <i> ... </i>) et egalement en gras (balises <b> ... </b>). 

On pourrait dire que Ressources informatiques a herite du formatage italique de la balise <i> et du formatage gras de 
la balise <b>. 

II en est de meme pour les styles. 



Le style 2 se caracterise par son propre style et celui du style 1 dont il a herite. 

Le style 3 se caracterise par son propre style et celui du style 1 et 2 dont il a herite. 

Dans la meme logique, on utilisera le terme de "parent" et "enfant". 

Le style 1 est bien entendu parent du style 2. De meme, le style 2 et le style 1 sont parents du style 3. Ou encore, le 
style 2 est enfant du style 1 et le style 3 est enfant des styles 2 et 1. 

Ces notions de cascade et d'heritage sont assez subtiles et delicates a comprendre. Elles se preciseront en cours 
d'etude des feuilles de style. 



3 



2 
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Type de police 



La police de caracteres est un element important de la presentation d'un document, que ce soit a I'ecran ou a 
I'impression. 

Le veritable probleme pour les concepteurs Web est qu'ils sont dependants des polices de caracteres reellement 
disponibles sur la machine de leurs visiteurs. Les feuilles de style apportent une plus grande diversite dans le choix de 
la police mais sans contourner le probleme des polices installees chez I'utilisateur. 

La syntaxe de la declaration de style pour le type de police du texte est : 



font-family : 



nom de la police ou famille de la police 



Nom de la police 

Exemole 

font-family: Arial; 



Commentaires 



• Si Ton indique plusieurs polices, le nom de celles-ci doit etre separe par une virgule. Soit par exemple : font- 
family: Arial, Helvetica, Georgia; 

Dans ce cas, le navigateur utilisera la premiere police nommee, a condition qu'elle soit presente sur le systeme 
du visiteur. Sinon, il passera a la suivante, etc. Si aucune des polices designees n'existe sur le systeme, le 
navigateur revient a la police par defaut. 

• Si le nom de la police comporte des espaces, le nom complet doit etre mis entre guillemets (simples ou 

doubles) : font-family : ' Courrier New', ' Trebuchet MS', 'Lucida Console' . 

• Le nom des polices n'est pas sensible a la casse (case insensitive). II est equivalent d'ecrire "Times New 
Roman" ou "times new Roman". 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<meta charset="iso-8859-l"> 

<style type="text/css "> 

hi (font-family: 'Lucida Console';} 

</style> 

</head> 

<body> 

<hl>HTML5 + CSS</hl> 

</body> 

</html> 
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Le resultat peut varier d'un ordinateur a I'autre en fonction des polices installees. 
Famille de police 

Au lieu de specifier le nom de la police, on peut utiliser des families de police ou des noms de polices generiques : 

• serif. Les polices de type serif ont des terminaisons au bout de leurs traits et un espacement des lettres 
proportionnel (Times New Roman, Bodoni, Georgia, Garamond...)- 

• sans-serif. Les polices sans serif ont les bouts des traits pleins, sans evasement et un espacement des lettres 
proportionnel (Arial, Verdana, Helvetica, Trebuchet...). 

• cursive. Famille de polices dont le resultat est proche d'une ecriture manuscrite (Script, Adobe Poetica...). 

• fantasy. Les polices fantaisies ou decoratives (Wingdings...). 

• monospace. Toutes les lettres ont les memes dimensions. L'aspect est semblable a celui obtenu avec une 
machine a ecrire manuelle et on emploie souvent ce type de police pour ecrire du code informatique (Courier, 
Courier New). 

Le navigateur choisira lui-meme la police disponible sur la machine de I'utilisateur qui correspond aux criteres du nom 
generique. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

.serif {font-family: serif;} 

.sans-serif {font-family: sans-serif;} 

.cursive {font-family: cursive;} 

.fantasy {font-family: fantasy;} 

.monospace {font-family: monospace;} 

</style> 

</head> 

<body> 

<p class=" serif ">Texte en serif</p> 

<p class=" sans-serif " >Texte en sans-serif </p> 

<p class="cursive">Texte en cursive</p> 

<p class=" f antasy">Texte en fantasy</p> 

<p class="monospace">Texte en monospace</p> 

</body> 

</html> 
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Texte en serif 




Texte en sans-serif 



Texte en cursive 



Texte en fantasy 



Texte en monospace 



Le resultat peut varier d'un ordinateur a I'autre en fonction des polices installees. 
Commentaire 

II est recommande de specifier un nom de police generique apres une enumeration de noms de police afin que 
I'affichage respecte le genre de police retenu plutot que la police par defaut du navigateur. 

Exemple : font-family: Arial, Verdana, Helvetica, sans-serif; 



£% Ne manquez pas de decouvrir, au chapitre "Les feuilles de style CSS3 - Les polices personnalisees", la 
possibility offerte par les CSS3 d'importer et d'afficher des polices personnalisees. Cette nouveaute marque 
I'entree de la typographic dans les applications Web. 
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Italique 



Cette propriete permet d'ecrire un texte en italique, ou avec une inclinaison des caracteres ou en ecriture normale. 



Commentaires 

La distinction entre italic et oblique est assez subtile et peu visible a I'affichage. La valeur italic reprend la version 
en italique de la police retenue tandis que la valeur oblique est simplement I'inclinaison vers la droite des caracteres 
de la police, par le navigateur. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

.italic (font-style: italic;} 

.oblique {font-style: oblique;} 

</style> 

</head> 

<body> 

<h2 class="italic">Titre en italique</h2> 
<h2 class="oblique">Titre en oblique</h2> 
</body> 
</html> 



font-style : 



italic; 



OU oblique; 



OU normal; 




Titre en oblique 



Titre en italique 
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Petite majuscule 

Cette propriete permet d'afficher un texte normal en petites majuscules. 



font-variant : 


small-caps; OU 




normal ; 


Commentaire 



La valeur small-caps affiche le texte en majuscules mais de dimension plus petite (small) que les majuscules normales. 
Ce qui donne un resultat moins "agressif". 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

.caps { font-variant : small-caps ; } 

</style> 

</head> 

<body> 

<hl>MAJUSCULES</hl> 

<hl class="caps">petites ma juscules</hl> 

</body> 

</html> 
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Graisse 



Cette propriete permet de mettre le texte en gras. Notons, meme si les differences ne sont pas toujours perceptibles, 
que les possibilities sont nettement plus nombreuses qu'avec la balise <b>. 



font-weight : 


bold; OU 




bolder; OU 




lighter; OU 




normal; OU 




valeur entre 100 et 900 


Commentaires 



• La valeur bold (gras) met la police de caracteres en gras. 

La valeur bolder (plus gras) accentue la graisse par rapport a I'element parent. 
La valeur lighter (plus leger) diminue la graisse par rapport a I'element parent. 

• Une valeur numerique entre 100 et 900. Les valeurs disponibles sont 100, 200, 300, 400, 500, 600, 700, 800, 
900. 

La valeur 500 correspond souvent a la graisse "normal". 
La valeur 700 correspond a gras. 

La valeur 900 correspond (theoriquement) a super gras. 

• Si cette propriete font-weight autorise de nombreuses valeurs, la totalite de ces valeurs ne sera cependant 
pas prise en compte par toutes les polices car elles n'ont pas toutes plusieurs versions de caracteres en gras. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

.bold { font-weight: bold;} 

.bolder { font-weight: bolder;} 

.bold900 { font-weight: 900;} 

</style> 

</head> 

<body> 

<p class="bold" >Texte en gras</p> 
<p class="bolder">Texte en gras</p> 
<p class="bold900">Texte en gras</p> 
</body> 
</html> 
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Texte en gras 
Texte en gras 
Teste en gras 



Dans le cas present, la difference n'est pas perceptible. 
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Taille des caracteres 



Alors que le Html 4.0 se limitait a sept tailles de caracteres dans les balises <hx>, les feuilles de style permettent de 
definir un nombre illimite de tailles de caracteres et ceci avec de multiples notations. 




valeur en pt ou 
valeur en px ou 
valeur en em ou 

xx-small, x-small, small, medium (defaut), large, x-large, xx-large OU 

smaller, larger soit plus petit, plus grand par rapport a I'element parent ou 
en pourcentage de la taille de I'element parent 



Commentaires 

• La taille en valeur peut etre indiquee en points (pt) ou en pixels (px). La notation en point est plus utilisee pour 
les pages destinees a etre imprimees et le pixel est plus repandu pour I'affichage a I'ecran. On s'accorde a 
considerer la taille de 12px comme plus ou moins equivalente a celle de 12pt. 

• Les valeurs peuvent aussi etre indiquees en mm, cm, ex, in ou pica mais elles sont peu frequentes pour 
I'affichage des caracteres. 

• II n'y a pas d'espace entre la valeur et I'unite, soit 12px est correct, 12 px ne Test pas. 

• On peut aussi determiner la valeur par rapport a la hauteur em d'une police. 1 em correspond a 100 % de la 
taille en cours de la police, 1.2 em a 120 %, 0.8 em a 80 %. L'usage de em est limite aux polices de caracteres. 

• Les valeurs xx-small, x-small, small, medium, large, x-large, xx-large SOnt illustrees Ci-apres : 




■ s 
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En small 
En medium 

En large 

En x-large 



En xx-large 




Les valeurs smaller (plus petit), larger (plus grand) et en pourcentage sont aussi appelees valeurs relatives 
car elles dependent de la taille de caracteres de I'element parent. 



• La taille peut varier d'un systeme d'exploitation a I'autre. Ainsi, une taille de caracteres de 12 points apparaitra 
plus grande sous Windows qu'en Macintosh. 
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Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css "> 

.taille {font-size: 96px; } 

</style> 

</head> 

<body> 

<hl>En Html5</hl> 

<p class="taille">En CSS</p> 

</body> 

</html> 
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En HtmlS 



En CSS 




Limite pour des raisons de mise en page du livre, on aurait pu afficher, avec les feuilles de style, des tallies de 
caracteres encore plus grandes. 
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Raccourci font 



Bien que les proprieties de police peuvent etre definies de fagon independante, le raccourci font permet de regrouper, 

en une seule declaration, les differentes proprietes font-style, font-variant, font-weight, font-size et font-family. 

Ce qui represente, dans la pratique de I'ecriture, un gain de temps appreciable. 
Un exemple serait : 

font: italic bold small-caps 24pt Arial, sans-serif; 

Cette seule declaration correspond a : 

font-style: italic; 
font-weight: bold; 
font-variant: small-caps; 
font-size: 24pt; 

font-family: Arial, sans-serif; 

Commentaires 

• Les differents attributs doivent etre indiques a la suite, separes d'un espace. 

• L'ordre n'a pas d'importance. II n'est pas obligatoire de definir chaque propriete de police. Pour les proprietes 
non definies, les valeurs par defaut seront retenues. 

• Le raccourci font permet egalement de definir I'interligne (propriete de texte, aborde au chapitre Le texte - 
Interligne). La notation est un peu particuliere. On indique la valeur de taille de caractere (propriete font- 
size), suivie d'une barre oblique, suivie de la valeur de I'interligne (propriete line-height). Ainsi, par exemple, 

pour font: italic bold small-caps 24pt/1.5 Arial, sans-serif;, la taille de la police Serait de 24 points et 

I'interligne de IV2 . 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

p (font: italic bold small-caps 24pt Arial, sans-serif;} 

</style> 

</head> 

<body> 

<p>Le raccourci font</p> 

</body> 

</html> 
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Les polices systeme 



Depuis la specification CSS 2, il est possible d'utiliser les polices systeme definies sur I'ordinateur de I'utilisateur. 
II suffit pour cela d'utiliser une declaration de style font suivie d'un des mots-cles suivants : 

- font: caption, police associee aux boutons. 

- font: icon, police associee aux etiquettes des icones. 

- font: menu, police associee aux menus. 

- font: message-box, police associee aux fenetres de dialogue. 

- font: small-caption, police associee aux etiquettes plus petites. 

- font: status-bar, police associee a la barre de statut. 
Cette possibility est peu retenue dans la pratique. 
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Couleur 



Cette propriete permet de definir la couleur du texte. 



color : 



nom de couleur ou 

notation hexadecimale sous sa forme #rrvvbb ou 
notation hexadecimale abregee sous la forme #rvb ou 
notation en mode RVB avec des entiers de a 255 ou 
notation en mode RVB avec des % de a 100 ou 
notation en mode RVBa ou a est compris entre et 1 ou 
notation en mode HSL ou 

notation en mode HSLa ou a est compris entre et 1 ou 

transparent 



Ces diverses notations des couleurs ont deja ete abordees au chapitre Notions de base des CSS - La notation des 
couleurs. 

Ainsi, il est equivalent de noter pour la couleur rouge : 

color: red; 
color: #ff0000; 
color: #f00; 
color: rgb (100%, 0%, 0%) ; 
color: rgb (255, 0, 0) ; 
color: rgb (255, 0, 0, 1) ; 
color: hsl(0, 100%, 50%); 
color: hsl(0, 100%, 50%, 1); 

Notons que la couleur par defaut du texte est le noir. 
Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css "> 

body { color: #ff0000; } 

</style> 

</head> 

<body> 

<hl>Texte en rouge</hl> 

</body> 

</html> 
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Commentaire 

Bien qu'etudiee ici pour le texte, cette propriete color peut s'appliquer a bien d'autres elements comme, par exemple, 
les lignes horizontales, les elements de formulaires ou les arriere-plans. 
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Decoration 



Cette propriete permet de personnaliser I'apparence du texte, par exemple avec le soulignement ou le surlignement. 



text -decor at ion : 


underline. Souligne le texte. 




overiine. Surligne le texte. 




line-throught . Barre le texte en son milieu. 




none. Enleve toute apparence definie par ailleurs. 


Commentaires 



• Rien n'empeche de definir plusieurs valeurs de decoration. II suffit de les separer par un espace, par exemple, 

text-decoration: underline overiine;. Dans le cas present, le texte sera en meme temps souligne et 
surligne. 



• La valeur line-through est particulierement utile dans les sites commerciaux pour indiquer notamment une 
revision de prix. Par exemple, ITiaintenant 3 1 00 € 85 € . Rappelons la balise <dei> qui realise le meme 
effet. 

• Appliquee a la balise de lien (<a>), la declaration de style text-decoration: none; enlevera le soulignement par 
defaut des liens. C'est assurement la sa principale utilisation. 



• N'utilisez que tres rarement le soulignement dans la conception de vos pages et applications Html5. En effet, le 
soulignement sur le Web indique par convention un lien. II n'y a rien de plus agagant que de cliquer sur ce que 
Ton pense etre un lien et qui ne se revele etre qu'un soulignement inapproprie. II existe d'autres fagons de 
mettre des elements en evidence. Pour rappel, la balise de soulignement <s> a ete retiree du Html5. 



• Pour les amateurs de precision, la valeur blink qui faisait clignoter le texte a (heureusement) disparu dans la 
specification CSS3. 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
.decol { text-decoration: 
.deco2 { text-decoration: 
.deco3 { text-decoration: 
.deco4 { text-decoration: 
</style> 
</head> 
<body> 

<p class="decol ">Texte surligne</p> 

<p class="deco2 ">Texte souligne</p> 

<p class="deco3">Texte souligne et surligne</p> 

<p class="deco4">Texte barre</p> 

</body> 

</html> 



overiine; } 
underline; } 
underline overiine; } 
line-through; } 
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Texte surligne 
Texte souliene 
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Texte soulisne et surEsne 


Texte bared 
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Transformation 



Cette propriete affiche du texte en majuscules ou en minuscules, quelle que soit la fagon dont les caracteres figurent 
dans le code source. 



text-transform: 



capitalize. Met la premiere lettre de chaque mot en majuscule, 
uppercase. Met toutes les lettres en majuscules, 
lowercase. Met toutes les lettres en minuscules, 
none. Laisse les lettres inchangees. 



Exemole 


<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




<style type="text/css"> 




.transforml { text-transform 


capitalize; } 


.transform2 { text-transform 


uppercase; ) 


.transform3 { text-transform 


lowercase; ) 


</style> 




</head> 




<body> 




<h2 class="t ransf orml " >texte 


en minuscules</h2> 


<h2 class="t ransf orm2 " >texte 


en minuscules</h2> 


<h2 class="transform3">TEXTE 


EN MAJUSCULES</h2> 


</body> 




</html> 
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Texte En Minuscules 
TEXTE EN MINUSCULES 
texte en majuscules 



Commentaire 

Si cette propriete ne parait pas d'une utilite evidente dans le domaine de I'edition, elle sera appreciee pour formater 
les donnees destinees aux ou provenant de bases de donnees. 
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Indentation 



Cette propriete permet d'indenter la premiere ligne de texte d'un paragraphe. 



text-indent : 



valeur precise (par exemple 20px) ou 

valeur relative en pourcentage par rapport a la largeur du 
paragraphe. 



Ce leger retrait, non prevu dans le Html, etait obtenu par la repetition disgracieuse dans le code de nombreux espaces 
insecables (snbsp; ). 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css "> 

.indentation { text-indent: 30px; } 

</style> 

</head> 

<body> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 

non risus. Suspendisse lectus . . . 

</p> 

<p class=" indentation" >Lorem ipsum dolor sit amet, consectetuer 

adipiscing elit. Sed non risus. Suspendisse lectus... 

</p> 

</body> 

</html> 
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Lor em ipsum dolor sit amet : consectetuer adipiscing 
elit. Sed non risus. Suspendisse lectus... 



Lorem ipsum dolor sit amet consectetuer 
adipiscing elit. Sed non risus. Suspendisse lectus... 



Commentaire 

La valeur de I'indentation peut etre negative. Ceci permet de realiser des effets inattendus mais le resultat n'est pas 
toujours garanti. 
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Espace entre les lettres 



Cette propriete permet de faire varier I'espacement entre les caracteres. Ce qui, utilise sans exageration, peut 
favoriser la lisibilite d'un texte. 



letter- spacing : 



valeur de longueur (par exemple 8px) 

normal 



Commentaires 

• Les valeurs de longueur doivent etre determinees en valeurs absolues. Les valeurs relatives, par exemple en 
pourcentage, ne sont pas admises ici. 

• Une valeur positive ajoute de I'espace entre les lettres. Une valeur negative diminue I'espace entre les lettres. 

• La justification du texte permet au navigateur de modifier I'interlettrage. Une valeur de letter-spacing mise a 
empechera la justification du texte. 

• Pour empecher que la propriete letter-spacing ne rapproche trop les mots et rende ainsi le texte illisible, on 
peut la coupler avec un espacement normal de mots word-spacing: normal; (voir propriete ci-apres). 

Exemple 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l' 


> 


<style type="text/css"> 




.espacel { letter-spacing 


15px; } 


.espace2 { letter-spacing 


-3px; } 


</style> 




</head> 




<body> 




<h2 class="espacel ">Texte 


etire</h2> 


<h2>Texte normal</h2> 




<h2 class="espace2 ">Texte 


condense</h2> 


</body> 




</html> 
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— 'TOf^ 


Texte e 


% % "a 


Texte normal 




Texte onrxknse 
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Espace entre les mots 



Cette propriete, tres proche de la precedente concernant I'espace entre les lettres, permet ici de faire varier 
I'espacement entre les mots. Ce qui, utilise sans exageration, peut favoriser la lisibilite d'un texte. 



word-spacing : 


valeur de longueur (par exemple 8px) 




normal 



Commentaires 



• Les valeurs de longueur doivent etre determinees en valeurs absolues. Les valeurs relatives, en pourcentage 
par exemple, ne sont pas admises ici. 

• Une valeur positive ajoute de I'espace entre les mots. Une valeur negative diminue I'espace entre les mots. 

• La justification du texte permet au navigateur de modifier I'espace entre les mots. Une valeur de word-spacing 
definie de empechera la justification du texte. 

• Les effets de cette propriete sur la lisibilite du texte sont parfois desastreux. 



Exemple 



< ! DOCTYPE 


html> 






<html lang 


= "fr"> 






<head> 








<title>Html5</title> 






<meta charset="iso-8859-l"> 






<style type="text/css "> 






.espacel { 


word-spacing: 2 0px; } 






.espace2 { 


word-spacing: -5px; } 






</style> 








</head> 








<body> 








<h3 class= 


"espacel ">Les mots, toujours 


les 


mots</h3> 


<h3>Les mots, toujours les mots</h3> 






<h3 class= 


"espace2">Les mots, toujours 


les 


mots</h3> 


</body> 








</html> 













■ Q Htm 15 


«- O O file:///C:/Users/Van%20LE & A 


Les mots, toujours les 


mots 


Les mots, toujours les mots 




Les m ots ,to uj o ur s les m ots 
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Interligne 

Cette propriete offre la possibility de modifier les interlignes. 



line-height : 


un nombre ou 




une valeur de longueur ou 




un pourcentage ou 




normal 


Commentaires 



• Le nombre de line-height multiplie I'interligne induit par la taille de la police de caracteres. Par exemple 2 pour 
un double interligne. 

• Une valeur de longueur. Celle-ci determine I'interlignage sans tenir compte de la police de caracteres. Par 
exemple, 18px. 

• Un pourcentage. L'interligne sera determine en pourcentage de I'interligne induit par la taille de la police. Ainsi 
un double interligne peut etre determine par 200 %. 

• La valeur donnee peut etre negative. Ce qui diminuera I'interligne normal et bien souvent la lisibilite. 

• La valeur normal correspond a I'interligne normal. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css "> 

.interligne { line-height: 200%;} 

</style> 

</head> 

<body> 

<p class="interligne"> 

Lorem ipsum dolor sit amet, consectetuer adipiscing<br> 

elit . Sed non risus. Suspendisse lectus tortor, dignissim<br> 

sit amet, adipiscing nec, ultricies sed, dolor. Cras<br> 

elementum ultrices diam. Maecenas ligula massa, . . . 

</p> 

<p> 

Lorem ipsum dolor sit amet, consectetuer adipiscing<br> 

elit. Sed non risus. Suspendisse lectus tortor, dignissim<br> 

sit amet, adipiscing nec, ultricies sed, dolor. Cras<br> 

elementum ultrices diam. Maecenas ligula massa, . . . 

</p> 

</body> 

</html> 
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Lor em ipsum dolor sit amet consectetuer adipiscing 
dit. Sednonrisus. Suspendisse lectus tortor, dignissim 
sit amet adipiscing nec : ultricies secL dolor. Cras 
elementum ultrices diam. Maecenas ligula massa,... 

Lorem ipsum dolor sit arnet consectetuer adipiscing 
elit. Sed non risus. Suspendisse lectus tortor : dignissim 
sit amet adipiscing nec. ultricies sed : dolor. Cras 
elementum ultrices diam. Maecenas ligula massa,... 




II faut rappeler que le raccourci font (chapitre La police de caracteres - Ecriture raccourcie) permet egalement de definir 
I'interligne. L'interligne est defini avec la taille de caracteres. La notation s'indique par la valeur de tail le de caracteres 
(propriete font-size), suivi d'une barre oblique, suivi de la valeur de l'interligne (propriete line-height). 



Exemole 



font: italic bold small-caps 24pt/1.5 Arial, sans-serif; 



- 2- 
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Espaces vides 



Cette propriete permet de controler les espaces vides. 

Depuis ses origines, le langage Html ignore les espaces vides, qu'il ramene a un seul espace, ainsi que les retours 
chariot. Les espaces vides multiples et les retours chariot sont aussi pris en charge en Html5 par la balise <pre> ... 
</pre>. Par contre I'attribut nowrap du Html 4.0, qui empeche la rupture de ligne automatique, n'est pas repris en 
Html5. II est done imperatif dans ce cas de passer par la presente declaration de style. 



white-space : 


pre OU 




nowrap OU 




normal. 


Commentaires 



• La valeur pre preserve les espaces multiples et les retours chariot. 

• La valeur nowrap empeche la rupture de ligne et affiche le texte horizontalement quelle que soit la place a 
utiliser dans le navigateur. Dans certains cas, I'utilisateur devra utiliser la barre de defilement horizontale pour 
lire la totalite du texte. 

• La valeur normal laisse le navigateur gerer a son gre les espaces multiples, les retours chariot et les ruptures 
de ligne. 



Exemple de pre 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859- 


-1"> 


<style type="text/css"> 




h2 { white-space: pre; 




</style> 




</head> 




<body> 




<h2> 




Editions ENI 




R e s s o u 


r c e s 


Informat 


i q u e s 


</h2> 




</body> 




</html> 
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Editions EM 



Ressources 
Informatiques 



Exemple de now rap 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
div { width: 200px; 

border: lpx solid gray} 
.exemple { white-space: nowrap; } 
</style> 
</head> 
<body> 
<div> 

Depuis ses origines, le langage Html ignore les espaces vides 

qu'il ramene a un seul espace. 

</div> 

<pre> 



</pre> 

<div class="exemple"> 

Depuis ses origines, le langage Html ignore les espaces vides 

qu'il ramene a un seul espace. 

</div> 

</body> 

</html> 




Q Htm 15 

«- C? O file7//C:/Users/Van5630Lanclte & '\ A 



Depuis ses origines, le langage 
Html ignore les espaces "vides 
qu'il ramene a un seul espace. 



Depuis ses origines, le langage Html ignore les espaces vides 
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Alignement horizontal 



Cette propriete permet de realiser un alignement comme dans le plus banal traitement de texte. 



text-align : 


left; Texte aligne a gauche (par defaut). 




right; Texte aligne a droite. 




center; Texte centre. 




justify; Texte justifie. 




auto; Alignement par defaut. 



La justification, qui donne a chaque ligne de texte la meme longueur, entraine parfois a I'ecran des resultats 
inattendus, voire decevants. Les opinions different quant a la lisibilite. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css "> 

p { text-align: justify;} 

</style> 

</head> 

<body> 

<P> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non 

risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing 

nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas 

ligula massa, . . . 

</p> 

</body> 

</html> 
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Lorem ipsum dolor sit amet : consectetuer adipiscing 
elit. Sed non risus. Suspendisse lectus tortor, dignissim 
sit amet adipiscing nec : ultricies sed, dolor. Cras 
elementum ultrices diam. Maecenas ligula massi... 
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Alignement vertical 

Cette propriete determine I'alignement vertical d'un texte par rapport a un autre element du code. 



verticsl - cilicjn ; 






sub; 




super; 




top; 




middle ; 




hoi - f~ r\m ' 




sans mention. 




valeur de longueur. 




pourcentage. 



Commentaires 



• Les valeurs baseline, sup et super s'utilisent par rapport a une ligne de texte. 

• La valeur baseline aligne le texte par rapport au bas de la ligne de texte (ligne de base). 

• La valeur sub met le texte concerne en indice, soit en dessous de la ligne de base. 

• La valeur super met le texte concerne en exposant, soit au-dessus de la ligne de base. 

• Cet alignement sans mention de valeur de longueur ou de pourcentage laisse la main au navigateur pour 
I'affichage. 

• Les valeurs top, middle, bottom alignent relativement a I'element parent, qui peut etre du texte ou encore une 
ou des cellule(s) de tableau. 

• La valeur top aligne par rapport au plus haut de I'element parent. 

• La valeur middle aligne par rapport au milieu de I'element parent. 

• La valeur bottom aligne par rapport au plus bas de I'element parent. 

• Une valeur de longueur positive aligne au-dessus de la ligne de base. Une valeur negative, en dessous. Par 
exemple, vertical-align: i . 7em mettra en exposant de 1.7 em. 

• Un pourcentage positif aligne au-dessus de la ligne de base. Une valeur negative, en dessous. Par exemple, 

vertical-align: -20% mettra en indice de 20 %. 

Exemple 1 

<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

.alignl { vertical-align : super; } 

.align2 { vertical-align :baseline; } 
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.align3 { vertical-align : sub; } 

</style> 

</head> 

<body> 

<h2>Ressources <i class=" alignl " >Inf ormatiques</ix/h2> 

<h2>Ressources <i class=" align2 " >Inf ormatiques</ix/h2> 

<h2>Ressources <i class=" align3 " >Inf ormatiques</ix/h2> 
</body> 
</html> 



f 
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Ressources Wormatiques 
Ressources Informatiques 
Ressources Informatiques 



Exemple 2 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css "> 

table { border: lpx solid gray; 

border-collapse: collapse; 

width: 200px; } 
td { border: lpx solid gray; 

width : lOOpx; } 
.top { vertical-align : top; ) 
.middle { vertical-align: middle;} 
.bottom { vertical-align: bottom;} 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td><br>snbsp; </td> 

<td class="top">texte</td> 

</tr> 

<tr> 

<td><br>snbsp; </td> 

<td class="middle">texte</td> 

</tr> 

<tr> 

<td><br>snbsp; </td> 

<td class="bottom">texte</td> 

</tr> 

</table> 

</body> 

</html> 
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texte 




texts 




texte 
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Direction du texte 



Cette propriete permet de changer la direction du texte. Si le frangais se lit de gauche a droite, cette propriete de style 
sera particulierement utile pour les langues qui se lisent de droite a gauche comme I'arabe et I'hebreu. 



direction : 



ltr (left to right). Ecriture de gauche a droite. 
rti (right to left). Ecriture de droite a gauche. 



Exemple 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




<style type="text/css "> 




.directionl { direction: rtl;} 




.direction2 { direction: ltr;} 




</style> 




</head> 




<body> 




<p c la s s= " di r e ct ion 1 ">Res sources 


Inf ormatiques</p> 


<p c la s s= " di r e ct ion2 ">Res sources 


Inf ormatiques</p> 


</body> 




</html> 
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Ressources Informatiques 
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Longueur et hauteur 



Les proprieties de style width et height vont permettre d'associer, a certaines balises de texte, respectivement la 
largeur et la hauteur d'une zone entourant le contenu textuel. 

Cette propriete est tres utile car elle evite de passer par I'astuce de tableaux factices pour afficher du texte dans une 
zone rectangulaire. 



width : 


valeur de longueur ou pourcentage 


height : 


valeur de longueur ou pourcentage 



Commentaires 



■ Les valeurs width (largeur) et height (hauteur) determinent la largeur et la hauteur du contenu. 

• La valeur de longueur specifie une valeur fixe. 

• Le pourcentage specifie une valeur relative. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css "> 
p { width: 235px; 

text-align: justify; } 
</style> 
</head> 
<body> 

<p>La puissance du Web est dans son universalite. L'acces pour 

tous, quelles que soient les incapacites, en est un aspect 

essentiel . </p> 

</body> 

</html> 
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La puissance du Web est dans son 




universalite. L'acces pour tous, quelles 




que soient les incapacites, en est un 




aspect essentiel. 





Les proprietes width et height necessitent de nombreux commentaires. Nous reservons ceux-ci lors de leur etude 
detaillee au chapitre Les proprietes de boite - Largeur et hauteur. 
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Sortes de marqueurs 

Cette propriete permet de determiner I'apparence de la puce ou le style de numerotation de la liste. 



list -style-type : 


disc; Cercle plein. 




circle; Cercle vid6. 




square; C3IT6. 




OU 




U.C O -Lillet J- / OUI L J. f £- f J f CLLi 




decimal-leading-zero; Soit 01, 02, 03, etc. 




upper-roman; Soit I, II, III, etc. 




lower-roman; Soit i, ii, iii, etc. 




upper-alpha; Soit A, B, C, etc. 




lower-alpha; Soit a, b, C, etc. 



Commentaires 

Les elements disc, circle, square sont identiques a ceux de la balise <ui> en Html5. Avec celle-ci cependant, la forme 
est determinee par defaut par le navigateur. 

Meme constatation pour les numerotations de la balise <oi>. Celle-ci est uniquement decimale. 
Exemple 



list 


-style- 


-type 


disc; } 


list 


-style- 


-type 


circle; ) 


list 


-style- 


-type 


square; ) 


list 


-style- 


-type 


decimal ; } 


list 


-style- 


-type 


decimal-leading- zero 


list 


-style- 


-type 


upper-roman; } 


list 


-style- 


-type 


lower-roman; } 


list 


-style- 


-type 


upper-alpha; } 


list 


-style- 


-type 


lower-alpha; } 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l 
<style type="text/css "> 
. stylel 
. style2 
. style3 
. style4 
. style5 
. style6 
. style7 
. style8 
. style9 
</style> 
</head> 
<body> 
<ul> 

<li class 
<li class 
<li class 

</ul> 
<ol> 

<li class 
<li class 
<li class 
<li class 
<li class 
<li class 
</ol> 
</body> 
</html> 



stylel ">Disque plein</li> 
style2">Cercle</li> 
style3">Carre</li> 



style4">Decimal</li> 
style5">Decimal</li> 
style6">Romain ma juscule</li> 
style7 " >Romain minuscule</li> 
style8 " >Alphabet ma juscule</li> 
style9">Alphabet minuscule</li> 
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® Htmt5 - Mccilla Firefox4.0 
Fichier Edition Affichage Historique Marque- pages OutNs 



Htm 1 5 





it 




D-s»P 



* Di&que pie in 
o Cercle 
■ Came 

1. Decimal 

02. Decimal 

III. Remain majuscule 

iv. Romain minuscule 

E. Alphabet majuscule 

f. Alphabet minuscule 



Termine 



- 2- 
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Marqueur graphique 



Cette propriete de CSS permet de remplacer les puces par une image. Ce qui apporte un peu de diversite par rapport 
aux puces traditionnelles du Html. 



list-style-image : 


url ( votre_puce . gif ) ; 




none ; 


Commentaires 



• La valeur url (votre_puce.gif) designe I'adresse (URL) de I'image a utiliser comme puce. On peut employer une 
adresse relative vers une image comprise dans le meme dossier (comme dans notre exemple) ou une adresse 
absolue (avec http://...). 

• Les images peuvent etre au format GIF, JPEG ou PNG. 



Exemple 



<!DOCTYPE html> 


<html lang=' 


fr"> 


<head> 




<title>Html5</title> 


<meta charset=" iso-8859-1 "> 


<style type= 


= "text/css"> 


ul { list-style-image: url (puce .gif ); } 


</style> 




</head> 




<body> 




<ul> 




<li>Element 


K/li> 


<li>Element 


2</li> 


<li>Element 


3</li> 


<li>Element 


4</li> 


</ul> 




</body> 




</html> 





® Htrnl5 - Moiilla Firefox 4.0 | m || S ||p*3~| 


Fichier Edition Afftchage Historique Marque- pages Outils 

J L- 1 Htrnl5 II+ . 




e 






□ - Se.P J ; Reagir 


</ Element 1 
</ Element 2 
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L'image puce. gif est disponible dans I'espace de telechargement. 
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Retrait 



Cette propriete determine la position de la seconde ligne (et les suivantes) d'un element de liste par rapport a la puce 
ou la numerotation. 



list-style-position: 


outside; (par defaut) 




inside; 



Commentaires 



• La valeur outside est la presentation classique des listes avec toutes les lignes de I'element en retrait par 
rapport a la puce ou au numero. 

• La valeur inside est une presentation un peu particuliere avec un retrait uniquement sur la premiere ligne de 
I'element de la liste. Les autres lignes de I'element viennent s'aligner sur le marqueur. 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

.positionl { list-style-position: outside;} 

.position2 { list-style-position: inside;} 

</style> 

</head> 

<body> 

<ul> 

<li class="positionl ">Element Kbr> 
Suite element Kbr /> 
Suite element K/li> 

</ul> 
<ul> 

<li class="position2 ">Element 2<br> 
Suite element 2<br /> 
Suite element 2</li> 

</ul> 

</body> 

</html> 
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• Element 2 
Suite element 2 
Suite element 2 
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Ecriture de liste raccourcie 

Cette propriete permet de reprendre dans une seule declaration de style les valeurs precedentes (list-style-type, 
list-style-image, list-style-position). 

Exemole 

list-style: url (puce . gif ) circle inside; 
Commentaires 

• Les valeurs sont regroupees et separees par des espaces. 

• II peut sembler bizarre de determiner une puce en image et une puce de type cercle. En CSS, cela signifie que 
si le navigateur ne trouve pas I'image a I'adresse specifiee, il affichera une puce en forme de cercle. 

• Aucune de ces valeurs n'est obligatoire et on peut aussi ne definir qu'une seule valeur. 
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Espace entre les cellules de tableaux 



Cette propriete permet de specifier I'espacement entre chaque cellule. C'est I'equivalent de I'attribut cellspacing du 
Html 4.0. 



border-spacing : 


valeur numerique en 




px. 




valeur numerique en 




pt. 




pourcentage. 



Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
table { width: 200px; 

text-align: center; 

border : lpx solid gray; 

border-spacing: lOpx; } 
td { border : lpx solid gray; 

background- co lor : rgb (213,230,245) 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td>K/td><td>2</td><td>3</td> 

</tr> 

<tr> 

<td>4</td><td>5</td><td>6</td> 

</tr> 

<tr> 

<td>7</td><td>8</td><td>9</td> 

</tr> 

</table> 

</body> 

</html> 



^! Himb - MoiiKa Firtfoi iX> 






FkIik Fc.ticin 4iVha 3 f h. stonqur 










- a 




1ID**P| 
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1 2 II 3 








4 




5 


6 








7 




S 


9 







Sans la propriete de style border-spacing, le tableau se presente par defaut ainsi : 
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1 


2 


3 


4 


5 


6 


7 


8 


9 



II est possible de n'avoir qu'une seule bordure de tableau avec border-spacing: Opx. 



1 


2 


3 


4 


5 


6 


7 


8 


9 



- 2- 



© ENI Editions - All rights reserved - Algeria Educ 



Les bordures des tableaux 



Nous avons vu que par defaut, le navigateur affiche deux bordures aux tableaux : la bordure qui en fait le contour et 
les bordures qui entourent les cellules. 

La propriete de style border-collapse permet de gerer cette situation. 



border-collapse : 


collapse; 




separate; 


Commentaires 



La valeur collapse fusionne les deux bordures adjacentes, ce qui donne I'aspect d'une bordure unique. 
La valeur separate affiche les deux bordures separement, ce qui est la situation par defaut. 



Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
table { width: 200px; 

text-align: center; 

border : Ipx solid gray; 

border-collapse: collapse;} 
td { border : lpx solid gray; } 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td>K/td><td>2</td><td>3</td> 

</tr> 

<tr> 

<td>4</td><td>5</td><td>6</td> 

</tr> 
<tr> 

<td>7</td><td>8</td><td>9</td> 

</tr> 

</table> 

</body> 

</html> 
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Les cellules vides de tableaux 

Cette propriete permet de determiner le comportement du navigateur lorsqu'il rencontre une cellule vide dans un 



tableau. 


empty-cells : 


show; 




hide; 



Commentaires 



La valeur show affiche la cellule vide. Les bordures et I'arriere-plan sont ainsi visibles. 

La valeur hide n'affiche pas la cellule vide. Les bordures et I'arriere-plan sont ainsi invisibles. 



Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
table { width: 200px; 

text-align: center;} 
td { border : lpx solid gray; 

background-color: rgb ( 2 13 , 2 3 , 2 4 5 ) ; ) 
.show {empty-cells: show;} 
.hide {empty-cells: hide;} 
</style> 
</head> 
<body> 
<table> 
<tr> 

<td class = "show"x/td><td>2</td><td>3</td> 

</tr> 
<tr> 

<td>4</td><td>5</td><td>6</td> 

</tr> 

<tr> 

<td>7</td><td>8</td><td class="hide"x/td> 

</tr> 

</table> 

</body> 

</html> 
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Position de la legende 



L'attribut align de la balise <caption> en Html 4.0 ayant disparu, il faut faire appel a cette propriete de style pour 
positionner la legende du tableau. 



caption-side : 



top; Legende au-dessus du tableau (defaut). 
bottom; Legende en dessous du tableau. 



Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l "> 
<style type="text/css"> 
table { width: 200px; 

text-align: center; 

border : lpx solid gray; 

border-collapse: collapse;} 
td { border : lpx solid gray; } 
caption { caption-side: bottom;} 
</style> 
</head> 
<body> 
<px/p> 
<table> 

<caption>Legende de tableau</caption> 
<tr> 

<td>K/td><td>2</td><td>3</td> 

</tr> 

<tr> 

<td>4</td><td>5</td><td>6</td> 

</tr> 

<tr> 

<td>7</td><td>8</td><td>9</td> 

</tr> 

</table> 

</body> 

</html> 
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Preambule 

Le Html 4.0 offrait, par certains attributs, la possibility d'ajouter une couleur ou une image de fond aux pages et 
eventuellement aux tableaux ou aux cellules de tableaux. Le Html5 ne propose quant a lui aucun attribut pour realiser 
ces effets de presentation. II faut, en Html5, passer imperativement par les feuilles de style CSS pour ajouter un 
arriere-plan a un element. II faut signaler cependant que les possibilites offertes par les feuilles de style sont plus 
etendues. Elles permettent, par exemple, de controler au gre de votre creativite la repetition de I'image de fond qui ne 
sera plus ainsi necessairement disposee en mosai'que. 
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Couleur d'arriere-plan 



Cette propriete permet de donner une couleur de fond a un element. 



background-color : 


nom de couleur ou 




notation hexadecimale sous sa forme #xxxxxx ou 




notation hexadecimale abregee sous la forme #xxx ou 




notation en mode RVB avec des entiers de a 255 ou 




notation en mode RVR aver dps % de f) a 1 Of) on 




notation en mode RVBa ou a est compris entre et 1. 




notation en mode HSL 




notation en mode HSLa ou a est compris entre et 1. 




transparent 



Les differentes notations des couleurs ont ete abordees en detail au chapitre Notions de base des CSS - La notation 
des couleurs. 

Notons que la valeur transparent, lorsqu'elle est appliquee a I'arriere-plan de la page, ne fait que reprendre la couleur 
par defaut du navigateur. 

Exemple 1 

Appliquer une couleur de fond a la page. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

body { background-color: rgb (215, 230, 245) ; } 

</style> 

</head> 

<body> 

</body> 

</html> 




Exemple 2 

Appliquer une couleur de fond a une division <div>. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 
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<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
div { width: 300px; 

background-color: #9cf; 

font-size: 2 5 0%; 

text-align: center;} 
</style> 
</head> 
<body> 
<div> 

<p>HTML5 + CSS3</p> 

</div> 

</body> 

</html> 




^ Htm 15 



HTML5 + CSS3 



- 2- 
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Insertion d'une image d'arriere-plan 

Cette propriete insere une image de fond disposee de fagon classique, soit en mosai'que. 



background-image : 


url (f ichier_image) ; 




none ; 


Commentaires 



• On peut utiliser I'adressage relatif ou absolu pour indiquer I'adresse (URL) de I'image. 

• Les images peuvent etre au format GIF, JPEG ou PNG. 

• La valeur none n'affiche aucune image d'arriere-plan. 
Exemole 

Mettre une image de fond a la page (presentation classique). 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

body { background- image : url (bulles . jpg) ; } 

</style> 

</head> 

<body> 

</body> 

</html> 
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L'image bulles.jpg est disponible dans I'espace de telechargement. 
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Repetition de l'image 



Cette propriete donne le controle au concepteur quant a la repetition de I'image qui ne sera ainsi plus necessairement 



disposee en mosai'que. 


background-repeat : 


repeat ; 




repeat -x; 




repeat-y ; 




no-repeat; 


Commentaires 



• Cette declaration de style n'a d'effet que si une image de fond a ete definie par la propriete background-image: 

url ( f ichier_image ) . 

• La valeur repeat repete I'image horizontalement et verticalement. Le resultat est des plus classiques et en tout 

point Semblable a la declaration background-image : url (f ichier_image) . 

• La valeur repeat-x repete I'image seulement horizontalement (selon I'axe des x). L'image forme ainsi une ligne 
horizontale dans le haut de I'element. 

• La valeur repeat-y repete I'image seulement verticalement (selon I'axe des y). L'image forme ainsi une ligne 
verticale le long du cote gauche de I'element. 

• La valeur no-repeat affiche I'element une seule fois sans le repeter. 

• Rien n'empeche de definir (par background-color) une couleur d'arriere-plan en meme temps qu'une image 
d'arriere-plan. Ceci permettra certains effets assez creatifs. En outre, I'arriere-plan de couleur sera toujours 
affiche meme si l'image n'est pas trouvee a I'adresse indiquee. 



Exemple 1 



Illustrons la valeur 


repeat 


-x. 


<!DOCTYPE html> 






<html lang="fr"> 






<head> 






<title>Html5</title> 




<meta charset="isc 


-8859- 


1"> 


<style type="text/ 


c s s " > 




body { background- 


image : 


url (gris . jpg) ; 


background- 


repeat 


: repeat-x; } 


</style> 






</head> 






<body> 






</body> 






</html> 
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L'image gris.jpg est disponible dans I'espace de telechargement. 
Exemple 2 



Illustrons la valeur repeat-y. 



<!DOCTYPE html> 






<html lang="fr"> 






<head> 






<title>Html5</title> 




<meta charset="isc 


-8859- 


1"> 


<style type="text/ 


c s s " > 




body { background- 


image : 


url (gris . jpg) ; 


background- 


repeat 


: repeat-y; } 


</style> 






</head> 






<body> 






</body> 






</html> 








Exemple 3 

Illustrons la valeur no-repeat. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

body { background-image: url (coin . gif) ; 

background-repeat: no-repeat;} 
</style> 
</head> 
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<body> 

</body> 

</html> 




L'image coin.gif est disponible dans I'espace de telechargement. 
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Positionnement de I'image 

Cette propriete va permettre de positionner precisement I'image de fond d'un element, au pixel pres. 



background- 


valeur de longueur valeur de longueur; 


position : 


pourcentage pourcentage; 




left OU center OU right / top OU center OU bottom; 


Soit par exemple : 



background-position: 50px lOOpx; 
background-position: 20% 50%; 
background-position: center center; 

Commentaires 

• Cette declaration de style n'a de sens que si une image de fond a ete definie par la declaration background- 
image: url ( f ichier_image ) . 

• Cette declaration ne s'utilise generalement que lorsque I'image n'est pas repetee (background-norepeat). 

• La premiere valeur a trait a la position par rapport au bord gauche (axe horizontal) et la seconde valeur a la 
position par rapport au bord superieur (axe vertical). Les deux valeurs sont separees par un espace. 

• Les pourcentages respectent le meme principe mais evidemment en pourcentage de la tail le de I'element 
parent. 

• On peut ne donner qu'une valeur. Dans ce cas, celle-ci sera interpretee comme etant la valeur horizontale (la 
premiere valeur). La valeur verticale ou seconde valeur sera alors automatiquement definie par defaut a la 
valeur center ou 50%. 

• Les valeurs en pourcentage et de longueur peuvent etre combinees. Ainsi, background-position: 50px 30%; 
est correct. 

• Les valeurs left (gauche), center (centre) ou right (droite) determinent la position horizontale. 

• Les valeurs top (haut), center (centre), bottom (bas) determinent la position verticale. 

• Les valeurs negatives sont acceptees. 
Exemple 1 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
div { width: 250px; 

height : 2 00px; 

border: lpx solid gray; 

background-image: url (paperl .png) ; 

background-repeat: no-repeat; 

background-position: 20px 20px; } 
</style> 
</head> 
<body> 
<div> 
</div> 
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</body> 
</html> 




Exemple 2 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
div { width: 250px; 

height : 2 00px; 

border: lpx solid gray; 

background-image: url (paper3 .png) ; 

background-repeat: no-repeat; 

background-position : bottom right; } 
</style> 
</head> 
<body> 
<div> 
</div> 
</body> 
</html> 




- 2- 
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Defilement de I'image 

Cette propriete permet de fixer une image de fond qui ne defile pas avec le reste de la page. 



background-attachment : 


scroll; 




fixed; 


Commentaires 



• La valeur scroll fait defiler I'image d'arriere-plan avec le contenu de la page. 

• La valeur fixed laisse I'image d'arriere-plan fixe alors que le contenu de la page peut defiler. 
Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css "> 

body { background- image : url (gris . jpg) ; 

background-repeat: no-repeat; 

background-position: center center; 

background-attachment: fixed;} 
</style> 
</head> 
<body> 
</body> 
</html> 
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Ecriture raccourcie 

La propriete background permet de regrouper les differentes proprieties en une seule ligne en ne reprenant que les 
valeurs de celle-ci. 

Comme les differentes proprieties et valeurs d'arriere-plan sont plutot longues a encoder manuellement, ce raccourci 
permet de gagner du temps mais reduit peut-etre la lisibilite du code. 

background: url (f ormat_image) white no-repeat right top fixed; 

Cette seule declaration correspond a : 

background-image: url (xxx . gif ) ; 
background-color: white; 
background-repeat: no-repeat; 
background-position: right top; 
background-attachment: fixed; 

Commentaires 

• Les differents attributs doivent etre indiques a la suite, separes d'un espace. 

• L'ordre n'a pas d'importance. 

• II n'est pas obligatoire de definir chaque propriete d'arriere-plan ; pour les proprietes non definies, les valeurs 
par defaut seront retenues. 

Exemole 

Le code de I'exemple de la section Defilement de I'image pourrait ainsi s'ecrire : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

body { background: url (gris . jpg) no-repeat center center fixed;} 

</style> 

</head> 

<body> 

</body> 

</html> 
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Concept du modele de boite 

L'element boite est une notion importante en CSS. Cette notion, un peu abstraite, doit etre correctement integree pour 
la suite de notre etude et tout particulierement en vue du positionnement (chapitre Les proprietes d'affichage - 
Positionnement). 

Cet element boite est aussi appele un conteneur ou un bloc (block). 

Le W3C definit un element boite comme une zone rectangulaire constitute : 

- d'un contenu, 

- d'une marge interieure (padding), 

- d'une bordure (border), 

- et d'une marge exterieure (margin). 




Precisons que : 

• Le contenu peut etre, par exemple, le texte d'un paragraphe. 

• Celui-ci est entoure d'un espace allant du texte aux bordures du cadre, que Ton appellera la marge interieure 
ou interne. 

• Les bordures du cadre (facultatives). 

• Un espace entourant le tout, appele marge exterieure ou externe. 

Les feui lies de style vont reprendre et etendre cette notion de boite pour donner au concepteur le controle total de la 
marge interieure et exterieure et de la bordure. 

Avec les feuilles de style CSS, on pourra, par exemple, regler distinctement : 

• Les quatre marges exterieures et ce dans toutes les directions, 

• Les quatre bordures (dimension, style, couleur), 

• Les quatre marges interieures et ce dans toutes les directions, 

• Les dimensions (largeur et hauteur) du contenu. 

La source principale de confusion est que, apres avoir precise la largeur et/ou la hauteur du contenu, on n'a pas 
explicitement defini la dimension totale de l'element boite, qui comprend la dimension du contenu, la marge interieure, 
la dimension de la bordure et la marge exterieure. 

Ainsi, la propriete width appliquee au contenu (le petit rectangle central) n'est qu'un element de la dimension de 
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I'element boite, il faut y ajouter la marge interieure, la bordure et la marge exterieure pour obtenir I'espace total reel 
de I'element boite. 

C'est bien entendu la meme chose pour la hauteur determinee par la propriete height. 

La dimension totale de I'element boite se calcule done ainsi : contenu + marges interieures + bordures + marges 
exterieures. 

Soit une boite avec les proprietes suivantes : 

• largeur de contenu 200 pixels, 

• marge interieure 20 pixels, 

• bordure d'une largeur de 10 pixels, 

• marge exterieure 20 pixels. 




La largeur de I'element boite est done bien, dans notre exemple, de 300 pixels qui se decomposent ainsi (de gauche a 
droite) : 20 pixels de marge exterieure + 10 pixels pour la bordure + 20 pixels de marge interieure + 200 pixels de 
contenu + 20 pixels de marge interieure + 10 pixels de bordure + 20 pixels de marge exterieure. Le total est bien de 
300 pixels. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
p { width: 200px; 

border: lOpx solid rgb (125, 165, 205) ; 

padding: 20px; 

margin: 20px; 

background-color : rgb (215,230,245) ; } 
</style> 
</head> 
<body> 

<p>Notion de boite en CSS</p> 

</body> 

</html> 
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Commentaires 

• Internet Explorer 9 avec le doctype du Html5 (<!doctype htmi>) affiche le modele de boite conformement aux 
specifications du W3C. 
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• Cependant, sans le doctype ou avec un doctype errone, Internet Explorer 9 passe en mode de compatibility 
arriere (quirks mode) et reprend son modele de boite de Microsoft errone. En effet, Microsoft a longtemps 
considere que la marge interieure et les bordures prennent place a I'interieur de la zone de contenu. La largeur 
apparente d'une boite sera alors egale a la seule largeur specifiee pour le contenu a laquelle on ajoutera 
simplement les marges exterieures. La boite precedente n'occupera done a I'ecran qu'une largeur de 240 
pixels. Sa zone de contenu se trouvera reduite des dimensions de bordure et de remplissage, soit ici 60 pixels 
par rapport au modele standard. 




CAUsersWan Lai 



Tv otion de boite en 
CSS 
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Tout ceci illustre bien I'importance du doctype. 
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Element bloc ou en ligne 



Nous avons deja aborde precedemment la notion d'element bloc ou en ligne. 

La propriete de style display permet de redefinir un element en ligne comme etant un element bloc et inversement. 



display : 


inline; (en ligne) 




block; (de type bloc) 



Cette propriete est tres riche en possibilites de presentation et est souvent utilisee pour des feuilles de style CSS 
complexes. 

Exemple 1 



Les nouvelles balises semantiques (chapitre "Les balises semantiques et d'organisation") sont des elements en ligne. 
Pour leur attribuer une fonction de presentation, il est imperatif de les definir comme des elements de type bloc. 
Appliquons ceci a la balise <nav>. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
nav { display: block; 

width: 350px; 

border: lpx solid gray; 

background-color : rgb (215, 230, 245) 
padding-left: 4px; } 
a { text-decoration; none; ) 
</style> 
</head> 
<body> 
<nav> 

<a>Home</a> | 

<a>Produits</a> I 

<a>Solutions</a> I 

<a>Points de vente</a> 

<a>Contact</a> 

</nav> 

</body> 

</html> 
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Home I Produits I Sotutions I Points de vente I Contact 



ontact 



Exemple 2 

Les items de listes sont des elements de type bloc. lis apparaissent d'ailleurs les uns en dessous des autres. Pourtant 
avec la propriete display: inline, il est possible de les afficher sur une ligne. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 
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<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
ul { list-style: none ; 

padding: 5px; ; } 
li { display: inline; 

border: Ipx solid gray; 

background-color: rgb ( 2 15 , 2 3 , 24 5 ) ; 

text-align: center; 

margin-right: 3px; 

padding-right: 15px; 

padding-left: 15px; } 
</style> 
</head> 
<body> 
<ul> 

<li>Item K/li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 

</ul> 

</body> 

</html> 
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Largeur et hauteur 

Les proprieties de style width et height vont fixer respectivement la largeur et la hauteur de I'element boite. 



width : 


auto OU 

valeur de longueur ou 
pourcentage 


height : 


auto OU 

valeur de longueur ou 
pourcentage 



Commentaires 



• Les valeurs width et height specifient la largeur et la hauteur du contenu (sans marges interieures, sans 
bordures et sans marges exterieures). 

• La valeur auto ajuste automatiquement la dimension au contenu. 

• La valeur de longueur specifie une valeur fixe. 

• Le pourcentage specifie une valeur relative. 

Notons qu'il existe en CSS2 des proprietes pour determiner la taille minimale et maximale d'un element de type bloc ou 
d'un element remplace dynamiquement par du JavaScript. 



max 


-height : 


Fixe la hauteur maximale 


min 


-height : 


Fixe la hauteur minimale 


max 


-width : 


Fixe la largeur maximale 


min 


-width : 


Fixe la largeur minimale 



La propriete max-height est generalement utilisee conjointement avec la propriete min-height pour fixer une marge de 
manoeuvre pour I'affichage des elements concernes. Ceci vaut aussi pour les proprietes max-width et min-width. A 
I'aide de ces proprietes CSS max-width et min-width, vous aurez ainsi la possibility de controler la largeur de votre 
design de fagon a ce qu'il s'adapte aux resolutions d'ecran des visiteurs. 

Ainsi, si la largeur depasse celle specifiee par max-width, le navigateur recalcule la largeur de I'element en se basant 
sur la valeur de max-width. De meme, si la largeur est inferieure a celle de min-width, le navigateur recalcule la largeur 
en fonction de la valeur determinee dans min-width. Le navigateur procede de meme pour les proprietes max-height et 

min-height . 

II faut noter que les proprietes max-height, min-height, max-width et min-width n'incluent pas les marges interieures, 
les bordures et les marges exterieures. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<p>width</p> 

<div style= "border: 2px solid black; 
width: 250px;"> 

XXX XXX XXX XXX XXX XXX XXX XXX 

</div> 

<p>min-width</p> 
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<div style="border : 2px solid black; 

min-width: 250px;"> 
xxx xxx xxx xxx xxx xxx xxx xxx 
</div> 

<p>max-width</p> 

<div style="border : 2px solid black; 

width: 250px; 

max-width: 150px;"> 
xxx xxx xxx xxx xxx xxx xxx xxx 
</div> 
</body> 
</html> 
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width 



XXX XXX XXX XXX xxx xxx xxx xxx 



min-width 



xxx xxx xxx xxx xxx xxx xxx xxx 



max-width 



xxx xxx xxx xxx xxx xxx 
xxx xxx 



A la premiere division, la largeur est fixee par width: 250px. A la seconde, celle-ci est determinee par min-width: 
250px. Comme cette valeur minimale n'est pas atteinte, la division prend toute la largeur de la fenetre. A la derniere 
division, la largeur repond a la valeur maximale max-width: i50px. 
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Marges externes 

Cette propriete permet de definir la marge exterieure de I'element boite. 



margin 




auto OU 


margin- 


-top : 


valeur de longueur ou 


margin- 


-right : 


pourcentage 


margin- 


-bottom : 




margin- 


-left : 





Commentaires 



• La valeur auto laisse la main au navigateur pour afficher les marges externes. 

• Une valeur de longueur definit precisement les marges exterieures. 

• Un pourcentage definit la longueur par rapport a I'element parent. 

• La marge exterieure de chaque cote de I'element boite peut egalement etre definie individuellement a I'aide 

des proprietes margin-top, margin-right, margin-bottom et margin-left. Les directions top, right, bottom, left 

designent respectivement la bordure superieure, droite, inferieure et gauche. Ces proprietes sont des 
specifications CSS2. 

• On peut raccourcir I'ecriture des proprietes de marge externe margin-top, margin-right, margin-bottom et 
margin-left, en designant une, deux, trois ou quatre valeurs a la propriete margin. 

Si une seule marge externe est indiquee, elle sera appliquee aux quatre cotes. 

Avec deux marges, la premiere sera appliquee aux cotes superieurs et inferieurs. 

La seconde aux cotes lateraux (droite et gauche). 

Avec trois marges, la premiere sera appliquee au cote superieur, la seconde aux cotes lateraux et la troisieme 
au cote inferieur. 

Avec quatre marges, celles-ci sont attributes dans le sens des aiguilles d'une montre en partant du cote 
superieur, soit cotes superieur, droit, inferieur et gauche. 

• Les marges peuvent etre definies avec des valeurs negatives, ce qui peut engendrer des effets visuels 
interessants, mais ces valeurs negatives risquent d'etre interpretees differemment selon les navigateurs. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

.body { margin: Opx; } 

.bloc { border: lpx solid black; 

margin: 20px 20px Opx 20px; 

text-align: center;} 

</style> 

</head> 

<body> 

<div class="bloc"> 
marge exterieure 
</div> 
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</body> 
</html> 
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Marges internes 

Cette propriete permet de definir la marge interieure de I'element boite. 



padding 




auto OU 


padding- 


-top : 


valeur de longueur ou 


padding- 


-right : 


pourcentage 


padding- 


-bottom: 




padding- 


-left: 





Commentaires 



• La valeur auto laisse la main au navigateur pour afficher les marges internes. 

• Une valeur de longueur definit precisement les marges interieures. 

• Un pourcentage definit la longueur par rapport a I'element parent. 

• La marge interieure de chaque cote de I'element boTte peut egalement etre definie individuellement a I'aide des 

proprietes padding-top, padding-right, padding-bottom et padding-left. Les directions top, right, bottom, left 

designent respectivement la bordure superieure, droite, inferieure et gauche. 

• On peut raccourcir I'ecriture des proprietes de marge interne padding-top, padding-right, padding-bottom et 
padding-ieft, en designant une, deux, trois ou quatre valeurs a la propriete padding. 

Si une seule marge interne est indiquee, elle sera appliquee aux quatre cotes. 

Avec deux marges, la premiere sera appliquee aux cotes superieurs et inferieurs. La seconde aux cotes 
lateraux (droite et gauche). 

Avec trois marges, la premiere sera appliquee au cote superieur, la seconde aux cotes lateraux et la troisieme 
au cote inferieur. 

Avec quatre marges, celles-ci sont attributes dans le sens des aiguilles d'une montre en partant du cote 
superieur, soit cotes superieur, droit, inferieur et gauche. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
.marge { width: 300px; 

padding-left: 50px; 

border: solid Ipx gray;} 

</style> 

</head> 

<body> 

<div class="marge"> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non 

risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing 

nec, ultricies sed, dolor. Cras elementum ultrices diam. 

</div> 

</body> 

</html> 
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Lor em ipsum dolor ait amet consectetuer 
adipiscing eKt. Sed non risus. Suspendisse lectus 
tortor : dignissim sit amet adipiscing nec : ultricies 
sed. dolor. Cras elementum ultrices diam. 
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Couleur de la bordure 



Ces proprieties de style permettent de definir la couleur des quatre bordures de I'element boite ou de chaque bordure 
prise individuellement. 



border- 


-color : 


nom de couleur 


border- 


-top-color : 


notation hexadecimale sous sa forme #xxxxxx 


border- 


-right-color : 


notation hexadecimale abregee sous la forme #xxx 


border- 


-bottom- 


notation en mode RVB avec des entiers de a 255 


color : 




notation en mode RVB avec des % de a 100 ou 


border- 


-lef t-color : 


notation en mode RVBa ou a est compris entre et 1. 






notation en mode HSL 






notation en mode HSLa ou a est compris entre et 1. 






transparent 



Commentaires 



• La propriete CSS1 border-color definit la couleur (unique) des quatre cotes de I'element boite. Ainsi, avec la 
propriete border-color: red, les quatre bordures auront la couleur rouge. 

• La couleur ne peut etre appliquee que si le type de la bordure (border-style) et I'epaisseur de la bordure 
(border-width) ont ete definis, sans quoi la bordure sera inexistante. 

• Les couleurs de chaque cotes de I'element boite peuvent egalement etre definies individuellement a I'aide des 

proprietes border-top-color, border-right-color, border-bottom-color et border-left-color. Les directions 

top, right, bottom, left designent respectivement la bordure superieure, droite, inferieure et gauche. 

• On peut faire I'impasse sur I'ecriture (un peu longue) des proprietes border-top-color, border-right-color, 
border-bottom-color et border-ieft-coior, en designant une, deux, trois ou quatre couleurs a la propriete 

border-color. 

Si une couleur est indiquee, elle sera appliquee aux quatre cotes. 

Avec deux couleurs, la premiere sera appliquee aux cotes superieurs et inferieurs. La seconde aux cotes 
lateraux (droite et gauche). 

Avec trois couleurs, la premiere sera appliquee au cote superieur, la seconde aux cotes lateraux et la troisieme 
au cote inferieur. 

Avec quatre couleurs, celles-ci sont attributes dans le sens des aiguilles d'une montre en partant du cote 
superieur, soit cotes superieur, droit, inferieur et gauche. 

• Avec la valeur transparent, la couleur des bordures est transparente mais celles-ci existent bel et bien. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
hi { border-style: solid; 
border-width: 7px; 

border-top-color: rgb (215, 230, 245) ; 
border-bottom-color : rgb (215,230,245); 
border-left-color : rgb (125, 165, 205); 
border-right -col or : rgb (125,165,205); 
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text-align: center;} 
</style> 
</head> 
<body> 

<px/p> 

<hl>Html5 + CSS3</hl> 

</body> 

</html> 
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Epaisseur de la bordure 

Cette propriete permettra de definir l'epaisseur des quatre bordures simultanement ou de chaque bordure prise 
individuellement. 



border 


-width : 


valeur de longueur; 


border- 


-top-width : 


thin; 


border 


-right-width : 


medium; 


border- 


-bottom-width : 


thick; 


border 


-left-width: 





Commentaires 



• La valeur thin intervient pour une bordure fine, medium pour une bordure moyenne et thick pour une bordure 
epaisse. (.'interpretation de I'epaisseur a partir de ces mots-cles varie d'un navigateur a I'autre. 

• L'epaisseur ne sera affichee que si le type de bordure (border-style) a ete defini. 

• L'epaisseur de chaque cote peut egalement etre definie individuellement a I'aide des proprietes border-top- 
width, border-right-width, border-bottom-width et border-left-width. Les directions top, right, bottom, left 

designent respectivement la bordure superieure, droite, inferieure et gauche. 

• On peut faire I'impasse sur I'ecriture (un peu longue) des proprietes border-top-width, border-right-width, 
border-bottom-width et border-left-width, en designant une, deux, trois ou quatre epaisseurs a la propriete 

border-width. 

Si une epaisseur est indiquee, el le sera appliquee aux quatre cotes. 

Avec deux epaisseurs, la premiere sera appliquee aux cotes superieurs et inferieurs. La seconde aux cotes 
lateraux (droite et gauche). 

Avec trois epaisseurs, la premiere sera appliquee au cote superieur, la seconde aux cotes lateraux et la 
troisieme au cote inferieur. 

Avec quatre epaisseurs, celles-ci sont attributes dans le sens des aiguilles d'une montre en partant du cote 
superieur, soit cotes superieur, droit, inferieur et gauche. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css "> 
hi { border-style: solid; 

border-color: rgb (125, 165, 205) ; 

border-width: thin thick; 

text-align: center;} 
</style> 
</head> 
<body> 

<hl>Html5 + CSS3</hl> 

</body> 

</html> 
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Style de la bordure 



Cette propriete CSS apporte une variete de bordures par rapport au seul style de bordures du Html. 



border-style: 


solid OU dashed OU dotted OU double OU groove OU ridge OU inset OU 




outset OU hidden OU none; 


border-top-style: 




border-right-style : 




border-bottom-style '. 




border-left -style: 





Commentaires 



• II convient d'illustrer ces differentes bordures, qui pour la plupart sont nouvelles dans le domaine de la 
conception de pages Web. Ainsi, le mot cle affiche : 

solid : un trait plein, 

dashed : des tirets, 

dotted : des pointilles, 

double : des doubles traits pleins, 

groove : effet 3D grave dans la page (oppose de ridge), 

ridge : effet 3D sortant de la page (oppose de groove), 

inset : bordures rentrantes, incrustees dans la page (inverse de outset), 

outset : bordures sortantes extrudees de la page (inverse de inset), 

hidden : pas de bordure (influe sur la bordure adjacente), 

none : equivaut a border-width: Opx soit, pas de bordure. 



solid 


1 solid | 


dashed 


' dashed ' 


dotted 


1 dotted ; 


double 








double 








groove 










groove 








ridge 








ridge 
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inset 


inset 






outset 




outset 





• Pour double, la largeur definie par border-width correspondra a la taille des deux traits et de I'espace entre 
ceux-ci. 

• Le style de bordure ne sera affiche que si I'epaisseur de bordure (border-width) a ete definie. 

• Le style de chaque cote peut egalement etre defini individuellement a I'aide des proprietes border-top-style, 
border-right-style, border-bottom-style et border-left-style. Les directions top, right, bottom, left 
designent respectivement la bordure superieure, droite, inferieure et gauche. 

• On peut faire I'impasse sur I'ecriture (un peu longue) des proprietes border-top-style, border-right-style, 
border-bottom-style et border-ieft-styie, en designant une, deux, trois ou quatre epaisseurs a la propriete 

border-style. 

Si le style est indique, il sera applique aux quatre cotes. 

Avec deux styles, le premier sera applique aux cotes superieurs et inferieurs. Le second aux cotes lateraux 
(droite et gauche). 

Avec trois styles, le premier sera applique au cote superieur, le second aux cotes lateraux et le troisieme au 
cote inferieur. 

Avec quatre styles, ceux-ci sont attribues dans le sens des aiguilles d'une montre en partant du cote superieur, 
soit cotes superieur, droit, inferieur et gauche. 

Le resultat au niveau des raccords n'est pas garanti. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css "> 
h2 { border-style: double; 

border-width: lOpx; 

border-color: gray; 

text-align: center;} 
</style> 
</head> 
<body> 

<h2>Une bordure qui a du style</h2> 

</body> 

</html> 
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Une bordure qui a du style 
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Ecriture raccourcie de bordure 



Cette propriete de style permet de noter de fagon raccourcie les differentes proprieties permettant de definir les 

bordures d'un element, SOit border-color, border-style et border-width. 

Exemole 

border: red double 5px; 
Commentaires 

• Ceci ne vaut que dans le cas ou les quatre bordures sont identiques. 

• Les valeurs de ces differentes proprietes sont regroupees et peuvent etre enoncees a la suite, peu importe 
I'ordre, mais separees par des espaces. 

• Pour une compatibility optimale des navigateurs, il est recommande que les trois proprietes soient 



Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

hi { border: dotted lpx black; 

text-align: center;} 
</style> 
</head> 
<body> 

<hl>Raccourci border</hl> 

</body> 

</html> 



renseignees. 
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Notion de pseudo-classe 



II existe, dans un document Html, des elements non definis par une balise ou par un attribut qui pourraient se reveler 
interessants pour leur appliquer un effet de style comme, par exemple, le lien visite (attribut absent en Html5) ou la 
premiere lettre d'un paragraphe. 

Le W3C a introduit, pour certains de ces elements non references de la page, la notion de pseudo-classes. On parle 
aussi de pseudo-style ou pseudo-element. 

La syntaxe des pseudo-classes est : 

selecteur : pseudo-classe { declaration ( s ) de style } 

Soit le selecteur, double point, le nom de la pseudo-classe suivi par la declaration de style entre accolades. 
Les pseudo-classes peuvent egalement etre utilisees avec des classes. Elles se noteront alors : 

selecteur . classe : pseudo-classe { declaration ( s ) de style } 

Soit le selecteur, point, le nom de la classe, double point, le nom de la pseudo-classe suivi par la declaration de style 
entre accolades. 

Tout comme pour les classes, les pseudo-classes sont definies a I'interieur de balises <styie type="text/css"> ... 
</styie> dans le head de la page ou dans une feuille de style externe. 
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Pseudo-classes de lien 



1. a:link 

La pseudo-classe a: link permet de definir I'apparence d'un lien qui n'a pas encore ete selectionne. 

On ne peut pas manquer ce grand classique des feuilles de style qui consiste a enlever le soulignement des liens par 
defaut. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
a:link { text-decoration: none; 
color : black; } 

</style> 

</head> 

<body> 

<p><a href="test . htm">Ceci est pourtant un lien !</a></p> 

</body> 

</html> 



[ 
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Ceci est pourtant un lien ! 



\ 



Notons que la declaration de style a {text-decoration: none;} aurait ete possible. El le aurait enleve le 
soulignement a tous les etats du lien (link, active, hover et visited). 



2. a:visited 

La pseudo-classe a:visited permet de definir I'apparence d'un lien qui a deja ete visite. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

a:visited {text-decoration: line-through; 
color : black; } 

</style> 

</head> 

<body> 

<p><a href ="test . htm">Ceci est un lien visite . </a></p> 
</body> 
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Ceci est un lien vi s ite. 



%M 



3. a:hover 

La pseudo-classe a:hover permet de definir I'apparence d'un lien au passage du curseur de la souris. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
a:hover { font-weight: bold; 

font-style: italic; 

font-size: 1 . 5em; } 

</style> 

</head> 

<body> 

<p><a href="test . htm">Ceci est un lien.</a></p> 

</body> 

</html> 
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Ceci est un lien. 

I 



4. a:active 

La pseudo-classe a: active permet de definir I'apparence d'un lien au moment ou il est clique par le visiteur. 
Exemple 



- 2- 
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<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

a:active { text-decoration: underline overline; ) 

</style> 

</head> 

<body> 

<p><a href ="test . htm">Ceci est un lien.</a></p> 

</body> 

</html> 
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Ceci est un lien. 
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Commentaires 



La pseudo-classe :active s'utilise generalement conjointement avec :visited, :hover et :iink. 

Pour obtenir un resultat correct, il est indispensable d'enoncer les apparences de lien dans I'ordre suivant 



: link 



: visited 



: hover 



: active 



La pseudo-classe :hover peut s'utiliser sur d'autres elements que les liens. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<style type="text/css"> 

div { width: 200px; height: 50px; 

border: Ipx solid black;} 
div:hover { background-color: rgb ( 12 5 , 1 65 , 2 05 ) ; ) 
</style> 
</head> 
<body> 
<divx/div> 
</body> 
</html> 
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Pseudo-classes de paragraphe 



1. :first- letter 

Cette pseudo-classe : first-letter permet de definir I'apparence de la premiere (et uniquement la premiere) lettre 
d'un paragraphe. On cree ainsi un effet de lettrine. 



Exemple 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta char set=" iso-885 9-1 " > 




<style type="text/css"> 




#box { border: Ipx solid black; 




margin-left: 30px; 




width: 200px; 




padding: lOpx; } 




. lettrine : first-letter { margin-right: 5px; 




font-size: 4em; } 




</style> 




</head> 




<body> 




<div id="box"> 




<div class="lettrine">Voici un texte qui illustre 


1' effet de 


lettrine que l'on peut obtenir avec : first-letter 


</div> 


</div> 




</div> 




</body> 




</html> 
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T oia un texte qui illustre 

1' effet de lettrine que l'on peut 
obtenir avec first-letter. 














2. :first-line 

Cette pseudo-classe : first-line permet de definir I'apparence de la premiere (et uniquement la premiere) ligne d'un 
paragraphe. 

La longueur de la premiere ligne est variable, elle dependra de la largeur de I'element boite, de la taille de police, etc. 
Exemple 

<!DOCTYPE html> 
<html lang="fr"> 
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<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

.box { border: Ipx solid black; 

margin-left: 30px; 

width: 200px; 

padding : lOpx; } 
. lignel : first-line { font-variant: small-caps; 

font-weight: bold;} 

</style> 

</head> 

<body> 

<div class="box"> 

<p class=" lignel " >Voici un texte qui illustre l'effet de style que 

l'on peut obtenir avec : first-line . </p> 

</div> 

</body> 

</html> 
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VOICI UN TESTE QUI ILLUSTRE 

l'effet de style que l'on peut 
obtenir avec first-line. 



ffk On voit apparaitre en CSS3 la notation :: first-letter et :: first-line afin de ne pas confondre ces 
pseudo-classes avec les pseudo-classes de selection, par exemple : first-child ou : first-of-type (voir 
chapitre Les feuilles de style CSS3 - Les selecteurs CSS3). 
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Inserer un contenu 



1. : before 

La pseudo-classe :before, associee a la propriete content, permet d'inserer un contenu avant un element. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

hi : before { content : url (arrow . gif ) ; } 

</style> 

</head> 

<body> 

<hl>Chapitre K/hl> 

<p>Lorem ipsum dolor sit amet . . .</p> 
<hl>Chapitre 2</hl> 

<p>Lorem ipsum dolor sit amet. . .</p> 

</body> 
</html> 
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Chapitre 1 



Lorem ipsum dolor sit amet... 



■S> Chapitre 2 



Lorem ipsum dolor sit amet... 



La propriete de style content ajoute une fleche (arrow.gif) devant chaque titre de niveau <hi> (hi:before) 
L'image arrow.gif est disponible dans I'espace de telechargement consacre a cet ouvrage. 



2. :after 

La pseudo-classe : after, associee a la propriete content, permet d'inserer un contenu apres un element. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
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<meta charset="iso-8859-l"> 

<style type="text/css"> 

h2 : after { content : url (new.gif) ; } 

</style> 

</head> 

<body> 

<h2>Chapitre K/h2> 

<p>Lorem ipsum dolor sit amet...</p> 
<h2>Chapitre 2</h2> 

<p>Lorem ipsum dolor sit amet...</p> 

</body> 

</html> 
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Chapitre 1 



Loretn ipsum dolor sit amet. 



Chapitre 2 



Loretn ipsum dolor sit amet.. 



La propriete de style content ajoute une fleche (new.gif) apres chaque titre de niveau <h2> (h2 rafter). 
L'image new.gif est disponible dans I'espace de telechargement consacre a cet ouvrage. 



: £% On voit apparaitre en CSS3 la notation ::before et :: after afin de ne pas confondre ces pseudo-classes 
avec les pseudo-classes de selection (voir chapitre Les feuilles de style CSS3 - Les selecteurs CSS3). 
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Preambule 



Dans le passe, le positionnement exact d'un element en Html tournait rapidement au cauchemar et il ne pouvait 
generalement se realiser que grace a un puzzle de tableaux imbriques. 

Les feuilles de style CSS proposent maintenant des outils pour positionner, au pixel pres, un element dans votre 
document Html. Editees a I'origine sous le terme CSS-P, ces proprietes de positionnement ont ete reprises sous la 
specification CSS2. 

Ces elements ainsi positionnes par les feuilles de style CSS pourront eventuellement etre rendus dynamiques par 
I'apport du JavaScript et du Dhtml. 
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Positionnement 

Un element peut se positionner de quatre fagons differentes. 



1. Positionnement statique 

C'est le positionnement normal de l'element selon la facon habituelle de proceder du navigateur. 
Le positionnement statique se determine par : 

position: static; 



Le concepteur n'a done pas le controle. L'element ne peut etre positionne ou repositionne et sa visibilite ne peut etre 
modifiee. II n'est egalement pas possible d'utiliser du JavaScript pour changer la position de l'element. 

2. Positionnement relatif 

C'est le positionnement d'un element par rapport a sa position normale ou statique. 

Cet element reste dans le flux des donnees mais est en quelque sorte excentre par rapport a sa position normale. 
La position est definie par les coordonnees (x,y) ou : 

• x est la distance par rapport au bord gauche de l'element parent ou de la fenetre du navigateur (axe 
horizontal). Ainsi, left determine la distance entre la gauche de l'element et la gauche de la page et right, la 
distance entre la droite de I'element et la droite de la page. 

• y est la distance par rapport au bord superieur de l'element parent ou de la fenetre du navigateur (axe 
vertical). Ainsi top determine la distance entre le bord superieur de l'element et le bord superieur de la page 
et bottom, la distance entre le bord inferieur de l'element et le bord inferieur de la page. 

QJD [eft 



:n:i 



Le positionnement relatif se determine par : 



position: relative; 


left 


: valeur ou %; 




top : 


valeur ou %; 




right: valeur ou %; 




bottom: valeur ou %; 



Commentaires 



• En pratique, une seule specification sur I'axe horizontal (left ou right) et une seule specification sur I'axe 
vertical (top ou bottom) suffisent. 

• Les valeurs de top, left, right et bottom peuvent etre negatives. 
Exemple 

<!DOCTYPE html> 
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<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
.normale { width: 180px; 

border: 2px solid gray; 
text-align: center;} 
.relative { position: relative; 

top: 30px; 

left: 60px; 

width: 180px; 

border: 2px solid gray; 

text-align: center;} 

</style> 

</head> 

<body> 

<div class="normale"> 
Position normale statique 
</div> 

<p> </p> 

<div class="relative"> 

Position relative 

</div> 

</body> 

</html> 
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Position normale statique 



Position relative 



3. Positionnement absolu 

Le positionnement absolu cree un element independant du reste du document. Les elements definis en position 
absolue sont retires du flux normal et se positionnent a I'emplacement exact defini par le concepteur. 

La position est definie par les coordonnees (x,y) ou : 

• x est la distance par rapport au bord gauche de I'element parent ou de la fenetre du navigateur (axe 
horizontal). Ainsi, left determine la distance entre la gauche de I'element et la gauche de la page et right, la 
distance entre la droite de I'element et la droite de la page. 

• y est la distance par rapport au bord superieur de I'element parent ou de la fenetre du navigateur (axe 
vertical). Ainsi top determine la distance entre le bord superieur de I'element et le bord superieur de la page 
et bottom, la distance entre le bord inferieur de I'element et le bord inferieur de la page. 



Le positionnement absolu se determine par : 



position: absolute; 


left 


: valeur ou %; 




top : 


valeur ou %; 




right: valeur ou %; 
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bottom: valeur ou %; 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
.absolu { position: absolute; 

left: 50px; top: 50px; 

width: 180px; 

border: 2px solid black; 

text-align: center;} 

</style> 

</head> 

<body> 

<div class="absolu"> 

Position absolue 

</div> 

</body> 

</html> 
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Position absoiue 



Commentaires 



• Le positionnement absolu n'est pas sans risque pour I'affichage correct de la page sous d'autres resolutions 
d'ecran que celle utilisee pour la conception car I'element ainsi positionne peut s'afficher en empietant sur le 
flux normal des autres donnees de la page. 

• II faut se rappeler que les navigateurs ajoutent par defaut une marge au corps de la page Html et que cette 
marge par defaut varie d'un navigateur a I'autre. II est ainsi prudent en cas de positionnement de specifier 
les marges de la balise <body>. 



4. Positionnement fixe 



Le positionnement fixe cree aussi un element independant dont on peut definir la position. Ici I'element reste fixe 
meme lorsque Ton fait defiler le document. 



position: fixed; 



Ce positionnement fixe a longtemps ete boude par les navigateurs. II est a present parfaitement integre dans les 
navigateurs de notre etude. 



Exemple 



<!DOCTYPE html> 
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<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
.fixe { position: fixed; 

top: 50%; 

left: 50px; 

width: 180px; 

border: 2px solid black; 

text-align: center;} 

</style> 

</head> 

<body> 

<div class=" f ixe" > 

Position fixe 

</div> 

</body> 

</html> 
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Flottement 



La propriete float retire un element boite du flux normal pour la placer le plus a droite ou le plus gauche possible dans 
son element parent, soit son conteneur. 



float : 


right; OU 




left; OU 




none ; 


Commentaires 



• La valeur right aligne I'element concerne a droite, poussant les autres elements a s'aligner a gauche. 

• La valeur left aligne I'element concerne a gauche, poussant les autres elements a s'aligner a droite. 

• La valeur none ne specifie rien et rend la main au navigateur. 

■ La position float ne peut s'appliquer en cas de positionnement absolu. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<div style=" float : right ;" > 
<img src=" cup . png"> 
</div> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 

non risus. Suspendisse lectus tortor, dignissim sit amet, 

adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 

diam. Maecenas ligula massa, varius a, semper congue, euismod non, 

mi . </p> 

</div> 

</body> 

</html> 
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Lorem ipsum dolor sit amet 

consectetuer adipiscing elit. Sed 

non risus. Suspendisse lectus 

tortor : dignissim sit amet 

adipiscing nec : ultricies set! 

dolor. Cras elementum ultrices diam. Maecenas 

ligula massa, varius a, semper congue, euismod 

non = mi. 





L 'element conteneur est la division box. La propriete de style float: right; force I'image a se positionner a droite dans 
le conteneur. Le texte, quant a lui, s'affiche alors a gauche. 
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L'image cup.png est disponible dans I'espace de telechargement. 



- 2- 



© ENI Editions - All rights reserved - Algeria Educ 



Degagement 



La propriete clear permet d'annuler le flottement introduit par la propriete float. 



clear : 


right; OU 




left; OU 




both; OU 




none ; 



Commentaires 



• la valeur right annule le flottement a droite. 

• la valeur left annule le flottement a gauche. 

• la valeur both annule le flottement des deux cotes. 

• la valeur none annule toute propriete de flottement. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<div style=" float : right ;" > 
<img src=" cup . png"> 
</div> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 

<p style="clear : right ">Sed non risus. Suspendisse lectus tortor, 

dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras 

elementum ultrices diam. Maecenas ligula massa, varius a, semper 

congue, euismod non, mi.</p> 

</div> 

</body> 

</html> 
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Sed non risus. Suspendisse lectus tortor . dignissim 
sit amet adipiscing neo ultricies sed : dolor. Cras 
elementum ultrices diam. Maecenas ligula massi 
varius a, semper congue : euismod non : mi. 



Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. 
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Superposition 



La propriete z-index ajoute un axe en profondeur permettant de positionner des elements au-dessus ou en dessous 
d'un autre element. 




Ainsi, I'element avec une propriete z-index: 2 apparaitra avant ou au-dessus de I'element avec une propriete z-index: 
o. 



z- 


un nombre entier 


index : 


(positif); 



Cette propriete ne fonctionne qu'avec un positionnement absolu des elements. 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
.boitel { position: absolute; 

left: 20px; top: 20px; 

width: 80px; height: 40px; 

padding: 4px; 

border: 2px solid gray; 

background- co lor : rgb (125,165,205); 

z-index : 1 ; ) 
.boite2 { position: absolute; 

left: 40px; top: 50px; 

width: 80px; height: 40px; 

padding: 4px; 

border: 2px solid gray; 

background- co lor : rgb (215,230,245); 

z-index : 2 ; ) 
.boite3 { position: absolute; 

left: 60px; top: 80px; 

width: 80px; height: 40px; 

padding: 4px; 

border: 2px solid gray; 

background-color: white; 

z-index : 3 ; } 

</style> 
</head> 
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<body> 

<div class="boitel "> 

z-index 1 

</div> 

<div class="boite2"> 

z-index 2 

</div> 

<div class="boite3"> 

z-index 3 

</div> 

</body> 

</html> 
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z-index 2 



z-index 3 
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Depassement 



La propriete overflow determine ce que le navigateur doit faire lorsqu'un element est plus grand que I'element parent 



qui le contient. 


overflow : 


hidden; OU 




scroll; OU 




visible; OU 




auto; 


Commentaires 



• Avec la valeur hidden, la partie qui depasse est cachee sans possibility de la voir ou d'y acceder. 

• Avec la valeur scroll, la partie qui depasse est cachee mais accessible par une barre de defilement. 

• Avec la valeur visible, la partie qui depasse est affichee, ignorant les specifications de I'element parent qui le 
contient. 

• Avec la valeur auto, on rend la main au navigateur. 
Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

.boite { width: 280px; height: 60px; 

border: lpx solid black; 

overflow: auto;} 

</style> 

</head> 

<body> 

<div class="boite"> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non 
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing 
nec, ultricies sed, dolor. Cras elementum ultrices diam. </div> 
</body> 
</html> 
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Lorem ipsum dolor sit amet : consectetuer 
adipiscing elit. Sed non risus. Suspendisse 
lectus tortor : dignissim sit amet. adipiscing - 
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Decoupage 



Cette propriete clip determine la partie visible de I'element, generalement une image. Ainsi, I'image entiere sera bien 
presente dans le document mais seulement une partie (rectangulaire) de celle-ci sera visible. 




Sup_gauche 



lnf_gauche 



Sup_droite 



- v^i \ V s ; 



c? o fl <>j ^ 



Inf droite 



Soit par exemple : 

clip: rect(10px 270px 190p 50px) ; 



Commentaires 



• Les coordonnees du rectangle decoupe sont donnees par les sommets superieur-gauche, superieur-droit, 
inferieur-droit et inferieur-gauche par rapport a I'image initiale. 

• On recommande d'inclure I'element qui sera ainsi decoupe dans une balise <div> ou <span>. 

• Cette propriete ne fonctionne qu'avec un positionnement absolu de I'element. 

Pour I'instant, seule la forme rectangulaire est implementee. On prevoit un plus grand choix de formes a I'avenir. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
.coupe { position: absolute; 

clip: rect(0px 50px 115px Opx) ; ) 

</style> 

</head> 

<body> 

<px/p> 

<div class="coupe"> 

<img src=" cup . png" > 

</div> 

</body> 

</html> 
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Affichage 



La propriete display permet de controler I'affichage des elements dans la page. 



display : 


block; OU 




inline; OU 




none ; 



Au chapitre Les proprieties de boite - Element bloc ou en ligne, nous avons deja traite de la propriete display qui 
permet de redefinir un element en ligne comme un element bloc et inversement (display: block et display: inline) 

C'est la propriete display: none qui nous interesse specialement ici. El le definit qu'un element ne sera pas affiche. Cet 
element est alors retire du document et de la mise en page. Voir la section Visibilite ci-apres, pour la difference avec la 

propriete visibility : hidden;. 

Exemple 1 

L'affichage normal de I'image. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

</head> 

<body> 

<p>xxx xxx xxx xxx xxx xxx</p> 
<div> 

<img src=" cup . png"> 
</div> 

<p>xxx xxx xxx xxx xxx xxx</p> 

</body> 

</html> 
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xxx xxx xxx xxx xxx xxx 

1 


V 






xxx xxx xxx xxx xxx xxx 





Exemple 2 

Avec la propriete display : none. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 
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.displaynone { display: none;} 

</style> 

</head> 

<body> 

<p>xxx xxx xxx xxx xxx xxx</p> 
<div class="displaynone"> 
<img src=" cup . png"> 
</div> 

<p>xxx xxx xxx xxx xxx xxx</p> 

</body> 

</html> 



La capture d'ecran illustre bien que I'image a ete retiree comme si elle etait absente du code source. 




xxx xxx xxx xxx xxx xxx 



xxx xxx xxx xxx xxx xxx 



7 




- 2- 
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Visibility 



La propriete CSS visibility determine si un element est visible ou cache. 



visibility : 


visible; OU 




hidden ; 


Commentaires 



• La valeur visible affiche I'element. 

• La valeur hidden cache I'element. 

Attention ! Malgre la valeur hidden, I'element occupe toujours sa place dans le document et un rectangle blanc 
apparait la ou il pourrait etre affiche. De cette maniere, la mise en page est conservee malgre I'absence 
(apparente) de I'image et les autres elements de la page conservent leur position relative initiale. La valeur 
hidden differe en cela de la propriete display: none; qui retire purement et simplement I'element de la page et 
ne reserve pas de place pour celui-ci. 

Exemple 

Avec la propriete visibility: hidden. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

.hidden { visibility: hidden;} 

</style> 

</head> 

<body> 

<p>xxx xxx xxx xxx xxx xxx</p> 
<div class="hidden"> 
<img src=" cup . png"> 
</div> 

<p>xxx xxx xxx xxx xxx xxx</p> 

</body> 

</html> 





W Q HtmE 




<- O O file:///C:/Users/Van%20L & A 


xxx xxx xxx xxx xxx xxx 


— -- -- - 


xxx xxx xxx xxx xxx xxx 





La capture d'ecran montre clairement que, meme si I'image n'est pas visible, I'espace de celle-ci a bien ete reserve lors 
de la mise en page. 
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Curseur de la souris 

Cette propriete cursor permet de modifier le curseur de la souris. 



cursor : 



mot-cle; 



Les differents mots-cles sont : 

• pointer. Le curseur represente un doigt indiquant un lien. 

• move. Le curseur indique un objet qu'on peut deplacer. 

• e-resize. Curseur pointant vers Test. 

• ne-resize. Curseur pointant vers le nord-est. 

• nw-resize. Curseur pointant vers le nord-ouest. 

• n-resize. Curseur pointant vers le nord. 

• se-resize. Curseur pointant vers sud-est. 

• sw-resize. Curseur pointant vers le sud-ouest. 

• s-resize. Curseur pointant vers le sud. 

• w-resize. Curseur pointant vers I'ouest. 

• text. Le curseur indique qu'on peut selectionner le texte. Souvent un I . 

• wait. Le curseur indique une progression. Souvent une montre ou un sablier. 

• help. Le curseur indique une aide. Souvent un point d'interrogation. 

• default. Le curseur par defaut selon la plate-forme. Souvent une fleche. 

• crosshair. Le curseur indique une croix. 

• progress. Le curseur en forme de fleche avec sablier. 

• not-allowed. Le curseur en forme de rond barre. 

• no-drop. Le curseur en forme de main avec un doigt deplie et un rond barre. 

• coi-resize. Curseur fait de deux traits verticaux avec une fleche de chaque cote. 

• row-resize. Curseur fait de traits horizontaux. 

• auto. Le navigateur determine lui-meme le curseur selon le contexte. 

• uri. Specifie un fichier image special pour le curseur. Le fichier image de I'URL doit etre au format cur (curseur) 
ou ani (curseur anime). 

Ou quelques curseurs sous forme imagee : 
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pointer 




move 




e-resize 


i — ► 


ne-resize 




nw-resize 




n-resize 


I 


se-resize 




sw-resize 




s-resize 


I 


w-resize 


i — ► 


text 


I 


wait 


I 


help 




crosshair 


+ 



Attention, I'apparence du curseur peut varier selon les navigateurs et le systeme d'exploitation. 
Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css "> 

h2 { cursor: help;} 

</style> 

</head> 

<body> 

<h2>Les feuilles de style CSS</h2> 

</body> 

</html> 



- 2- 
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Numerotation automatique 



La specification CSS2 a introduit la notion de compteurs (counter) dans les proprietes de style. Grace a ceux-ci, il sera 
possible de generer, par exemple, une numerotation automatique de sections et sous-sections. 



counter-reset : 


nom du compteur; 


counter-increment : 


nom du compteur valeur decrementation; 



Commenta ires 



• La propriete counter-reset cree ou reinitialise le compteur designe. 

• La propriete counter-increment incremente le compteur designe. 

• Le pas decrementation est par defaut de 1. Mais une autre valeur peut etre specifiee. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css "> 

body { counter-reset: section; 

font-size: 50%;} 
hi { counter-reset: item;} 
hl:before { counter-increment: section; 

content: "Chapitre " counter (section) " : ";} 
h2:before { counter-increment : item; 

content: counter (section) "." counter ( item) " ";} 

</style> 

</head> 

<body> 

<hl>Partie Html</hl> 

<h2>Html 4.0</h2> 

<h2>Xhtml 1.0</h2> 

<h2>Xhtml5</h2> 

<hl>Partie scripts</hl> 

<h2>JavaScript</h2> 

<h2>Dhtml</h2> 

<hl>Partie cadriciels</hl> 

<h2> jQuery</h2> 

<h2>Do jo</h2> 

</body> 

</html> 



Ces proprietes de style necessitent quelques explications. 

body { counter-reset: section;} 

On initialise un compteur appele section dont le champ d'action est le corps du document. 

hi { counter-reset: item;} 

On initialise un autre compteur item dont le champ d'action est les titres de niveau 1. 

hl:before { counter-increment: section; 

content: "Chapitre " counter (section) " : ";} 

A chaque titre <hi>, le compteur section s'incremente d'une unite (counter-increment: section). La propriete de style 
ecrit devant les titres <hi> (hi:before) le contenu (content) repris entre les guillemets. Soit le texte "Chapitre " suivi de 
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la valeur du compteur section. 



h2 : before { counter-increment : item; 

content: counter (section) "." counter ( item) " ";) 

A chaque titre <h2>, le compteur item s'incremente d'une unite (counter-increment: item). La propriete de style ecrit 
devant les titres <h2> (h2:before) le contenu (content) repris entre les guillemets. Soit le texte "Chapitre " suivi de la 
valeur du compteur item. 




Q Htm 15 

<- C O file:///C:/Users/Van%20 & A 



Chapitre 1 : Partie Html 

1.1 Html 4.0 

1.2 Xhtml l.D 
1.3Xbtml5 

Chapitre 2 : Partie scripts 

2.1 JavaScript 

2.2 Dhtml 

Chapitre 3 : Partie cadriciels 

3.1 jQuery 

3.2 Dojo 



- 2- 
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Utilite des feuilles de style pour I'impression 

Vous avez inevitablement deja ete degu lors de I'impression d'une page Web. Entre autres desagrements, on peut 
citer : 



• La page imprimee a epuise une bonne partie de vos cartouches d'encre avec des images ou des bannieres 
inutiles. 



• Les menus de navigation, si utiles sur la toile, encombrent votre feuille imprimee avec des informations 
inutilisables. 



• La police utilisee a I'ecran se revele difficilement lisible sur la version papier. 



• La page Web est mal imprimee car des parties du document sont absentes de votre feuille. 



. Etc. 



Les feuilles de style viennent a votre secours pour prevoir une version imprimable sans devoir ecrire une page distincte 
a cet effet. 

II ne sera pas necessaire d'imprimer la page pour faire des essais ou des mises au point. Un apergu avant impression 
permet de visualiser la page comme si elle etait imprimee. 
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Feuilles de style selon le media de sortie 



1. Presentation 

Les feuilles de style permettent des representations differentes selon le media de sortie. 

Si nous sommes des habitues du Web a partir de I'ecran, d'autres internautes le sont a partir d'un ordinateur de 
poche, d'un smartphone, d'une interface vocale, d'une barrette Braille ou d'un document imprime. 

Avec I'attribut media, qui vient s'ajouter a la declaration de style, on peut concevoir des feuilles de style pour 
differents medias de sortie. 



media="all" 


Les styles definis s'appliquent a tous les types de medias (valeur par 
defaut). 


media=" screen" 


Les styles s'appliquent a I'affichage sur un ecran classique. 


media="print " 


Les styles s'appliquent a I'impression sur papier. Les navigateurs 
utiliseront ces specifications lorsque I'utilisateur demande d'imprimer la 
page Web. 


media="pro jection" 


Les styles s'appliquent a la projection de donnees avec des projecteurs. 


media=" handheld" 


Les styles s'appliquent a I'affichage sur des ordinateurs de poche ou des 
smartphones permettant la navigation sur le Web. 


media=" aural " 


Les styles s'appliquent a des systemes de restitution vocale assistee par 
ordinateur. 


media= "braille" 


Les styles s'appliquent a des barrettes Braille congues pour les non- 
voyants. 


media=" embossed" 


Les styles s'appliquent a des imprimantes a perforation Braille congues 
pour les non-voyants. 



Ces differentes possibilites ne sont pas encore toutes prises en charge par les navigateurs recents. On pense aux 
proprietes vocales (media="aurai") dont les feuilles de style sont editees depuis longtemps mais qui n'ont pas encore 
ete reprises par les navigateurs grand public. Seul Opera 8+ les prend partiellement en charge. 



2. Incorporation 

II existe differents moyens pour incorporer dans un document Html5 ces styles specifiques a un media. 
Style interne 

Les proprietes de style s'encodent ici dans I'en-tete du document Html. 
Exemple 

<head> 

<style type="text/css " media="print"> 

/* Feuilles de style qui s'appliquent au document imprime */ 
</style> 

<style type="text/css " media="screen"> 

/* Feuilles de style qui s'appliquent lors de I'affichage a I'ecran */ 
</style> 

<style type="text/css" media="all"> 

/* Feuilles de style qui s'appliquent en toutes circonstances */ 

</style> 

</head> 
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Style externe 



Les proprieties de style s'encodent ici dans un document distinct du document Html5. C'est sans aucun doute la 
methode la plus utilisee par les concepteurs de site car la plus compatible et la plus proche de I'esprit du Html5. 

Exemple 

<link rel=" stylesheet " type"text/css " href ="print . ess " media="print"> 

Declaration qui appelle la feuille de style externe print. ess, preparee pour I'impression (print). 

<link rel=" stylesheet " type"text/css " href ="ecran . ess " media="screen"> 

Declaration qui appelle la feuille de style ecran.css, destinee a I'affichage a I'ecran (screen). 

Style importe 

Exemple 

@import url (print . ess ) print; 

Declaration qui appelle la feuille de style externe print. ess, preparee pour I'impression (print). 

Simport url (ecran . ess ) screen; 

Declaration qui appelle la feuille de style ecran.css, destinee a I'affichage a I'ecran (screen). 
@media 

Outre la possibility d'incorporer diverses feuilles de style separees pour differents medias de sortie dans une page 
Html, il existe egalement la possibility de definir differents modes de sorties dans une seule declaration de style. 

<style type="text/css"> 

@media print 

{ 

/* definition de formats pour I'impression */ 
} 

@media screen 
{ 

/* definition de formats pour une sortie ecran ... */ 
} 

</style> 
Exemple 

Ce mode de notation peu habituel en CSS donnerait en pratique : 

<style type="text/css"> 
@media print 

{ body { background-color: white;} 
} 

Smedia screen 

{ body { background-color: black;} 
} 

</style> 



- 2- 
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Optimiser une page d'impression 

Avant d'explorer les proprieties de style propres a I'impression, il convient de passer la page en revue afin de 
I'optimiser. On procedera en trois temps : 

• deceler et eliminer tous les elements qui se reveleront inutiles voire derangeants lorsque la page sera 
imprimee. 

• revoir le formatage du contenu textuel en vue de la lecture sur papier. 

• ajouter des informations, habituellement reservees a I'affichage a I'ecran. 



£% On peut dire qu'une page Web affichee a I'ecran doit etre plaisante a I'oeil et qu'une information papier doit 
etre plaisante a I'esprit. Plus que jamais, c'est la richesse de I'information ou du contenu qui est recherchee sur 
la page imprimee. 



Sans etre limitatif, il faudra veiller : 

■ aux arriere-plans de couleur ou avec image. 

• a la couleur des caracteres. 

• au type de police de caracteres. 

• a la taille des caracteres. 



• aux liens. 



• aux images. 

• au menu de navigation. 

• aux animations Flash, JavaScript et Dhtml. 

• aux formulaires. 



• aux marges... 

Reprenons ces differents points en detail : 

• Modifier les arriere-plans. Par defaut, la plupart des navigateurs n'impriment pas les couleurs et les images 
d'arriere-plan. Cependant, si votre visiteur a coche I'option avancee Imprimer les couleurs et les images 
d'arriere-plan, il risque de ne pas apprecier votre page specialement congue pour I'impression et de vous 
considerer (a tort) comme un pietre concepteur. Ainsi, il est prudent de definir pour cette page d'impression des 
arriere-plans blancs. 

body { background: white; 

background-image: none;} 

• Mettre en noir les polices de couleur. Parfois plaisants a I'ecran, des caracteres de police colories risquent de 
consommer inutilement de I'encre et n'apportent pas d'enrichissement a I'information sur papier. 

body { color: black;} 

• Changer la police en serif. Bien que ce soit une question d'appreciation personnelle, d'aucuns trouvent les 
polices sans-serif (Arial , Verdana, Helvetica) plus lisibles a I'ecran que les polices de type serif (Times New 
Roman, Garamond), plus adaptees a la lecture sur papier. 
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font-family : Arial, Verdana, sans-serif; 



• Veiller a la taille de la police. Si votre page Web est ecrite avec une police de petite dimension, il est prudent 
d'adopter une taille de caracteres de 11 pt ou 12 pt, voire plus grande en fonction de votre audience. II est 
conseille de travailler avec des points (pt), plus specifiques a I'impression, plutot que des pixels (px). 

font-size : 12pt; 

• Identifier les liens. Question delicate que celle des hyperliens. De toute evidence, ils ne sont pas aussi utiles 
sur papier qu'a I'ecran, mais il est souvent important d'indiquer qu'il y avait des liens dans I'original. 

Pour ce faire, plusieurs politiques peuvent etre adoptees. On peut forcer le soulignement des liens dont celui-ci 

avait ete efface par la propriete text-decoration: none; . 
a { text-decoration : underline; ) 

Certains preconisent de completer le lien avec son adresse. 

a: after { content: " (" attr(href) ") ";} 

Les mentions "cliquez ici", deja peu plaisantes a I'ecran, sont tout a fait inutiles en version papier. 

• Enlever toute image et banniere inutile a la comprehension du contenu. II est cependant conseille de conserver 
les logos pour vous identifier aupres de I'utilisateur. 

.noprint { display: none;} 

<div class = "noprint "ximg scr="xxx . jpg" alt=""x/div> 

• Enlever les outils de navigation. Les menus de navigation, particulierement s'ils sont places sur les cotes, 
occupent de la place inutilement sur la feuille d'impression. En les enlevant, vous permettrez au texte de 
s'imprimer plus efficacement. 

tnavigation { display: none; } 
<div id="navigation"> . . . </div> 

• Les marges. Les marges ont peut-etre ete modifiees par rapport aux marges par defaut pour I'affichage. Pour 
I'impression papier, celles-ci devront eventuellement etre revues. 

margin-left: 20pt; 

• Enlever les animations Flash, JavaScript et Dhtml, car elles s'impriment tres mal voire pas du tout. Meme fagon 
de proceder avec la propriete display: none; . 

• Les formulaires ne sont d'aucune utilite en version papier. Meme fagon de proceder avec la propriete display: 
none ; . 

• Les ajouts. Certaines informations risquent d'etre absentes de la page imprimee, comme I'indication de I'URL 
originale du site pour permettre a I'utilisateur de retourner sur votre site Web, votre logo et la mention d'un 
copyright si necessaire. 

Exemple 
Soit la page : 



© ENI Editions - All rights reserved - Algeria Educ 



® Htmf5 - Moiilla Firefox4.0 
Fichier Edition Affichage Historique Marque-pages Outils ? 



htm 1 5 



1 fcV*- 



Les poissons 



Les poissons sont des animaux aquatiques a sang froid, pourvus 
de nageo res et dont le corps est couvert d'ecai lies, lis respirent 
grace a des branc hies. Jusqu'a present, on a repertone plus de 
27 315 especes de poissons. 

Documentation graturte - Email : I 



rgb (125, 165,205) ; 



sans-serif; 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 

body { background-color: rgb (200, 215, 230) ; } 
.titre { font-size: 36px; 

font-weight: bold;} 
. texte { width: 350px; 

background-color : rgb (125,165,205); 

color: white; 

padding: 5px; 

font-size: 9pt; 

font-family: Arial, sans-serif;) 
.formulaire { width: 350px; 

background-color : 
color: white; 
font-size: 9pt; 
font-family: Arial, 
padding : 5px; } 

</style> 

</head> 

<body> 

<pximg src="fish.png" width="40" height="40" alt=""> 
<span class="titre">Les poissons</spanx/p> 
<div class="texte"> 

Les poissons sont des animaux aquatiques a sang froid, pourvus de 

nageoires et dont le corps est couvert d'ecailles. lis respirent 

grace a des branchies . Jusqu'a present, on a repertorie plus de 27 

315 especes de poissons. 

<br> 

</div> 

<div class=" f ormulaire"> 
<form action=""> 
Documentation gratuite - Email 
<input type="submit" value="Envoyer"> 
<input type="reset" value="Retablir "> 
</f orm> 
</div> 
</body> 
</html> 



<input type="text" size="20"xbr> 



Cette page et les images sont disponibles dans I'espace de telechargement. 
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Pour une page d'impression, on fera en sorte : 

• d'enlever I'image du poisson, inutile pour le contenu. 

• d'adopter des arriere-plans blancs. Bien que par defaut, les navigateurs n'impriment pas les couleurs et images 
d'arriere-plan, on prendra cependant cette precaution pour les utilisateurs qui auraient desactive cette option. 

• d'imprimer le texte dans une police plus grande et done plus lisible. 

• d'ecrire le texte en noir plutot qu'en blanc. 

• d'abandonner le formatage en gras du texte pour une ecriture normale. 

• de retenir une police de type serif au lieu de la sans-serif initiale. 

• d'oter I'arriere-plan de couleur du texte. 

• de ne pas imprimer le formulaire, inutile en version papier. 
Le code devient : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css " media="screen"> 

body { background-color: rgb (200, 215, 230) ; } 

.titre { font-size: 36px; 

font-weight: bold;} 
.texte { width: 350px; 

background-color: rgb (125, 165, 205) ; 

color: white; 

padding: 5px; 

font-size: 9pt; 

font-family: Arial, sans-serif;) 
.formulaire { width: 350px; 

background-color: rgb (125, 165, 205) ; 
color: white; 
font-size: 9pt; 

font-family: Arial, sans-serif; 
padding : 5px; } 

</style> 

<style type="text/css " media="print"> 
body { background-color: white;} 
img { display: none;} 
.titre { font-size: 36px; 

font-weight: bold;} 
.texte { background-color: white; 

color: black; 

font-size: 12pt; 

font-family: sans-serif;} 
.formulaire {display: none;} 
</style> 
</head> 
<body> 

<pximg src="fish.png" width="40" height="40" alt=""> 
<span class="titre">Les poissons</spanx/p> 
<div class="texte"> 

Les poissons sont des animaux aquatiques a sang froid, pourvus de 

nageoires et dont le corps est couvert d'ecailles. lis respirent 

grace a des branchies. Jusqu' a present, on a repertorie plus de 27 

315 especes de poissons. 

<br> 

</div> 
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<div class="f ormulaire"> 
<form action=""> 

Documentation gratuite - Email : <input type="text" size="20"xbr> 

<input type="submit" value="Envoyer "> 

<input type="reset" value="Retablir "> 

</f orm> 

</div> 

</body> 

</html> 



A I'impression : 



Html? 



Les poissons 





Les poissons sont des animaux aqualiques a sang frort pcurvus de nageoifes eldont le 
corps est couvert d'atailles. lis respirenl grace a des branch^ Jusqu'a present, on a 
r£pertori£ plus de 27 315 esp&ces de poissons 
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Saut de page avant 

Cette propriete forcera un saut de page avant un element de la page. 



page-break-before : 


always; 




avoid; 




auto; 


Commentaires 



• Le parametre always force un saut de page avant I'element ou il est defini. 

• Le parametre avoid empeche un saut de page avant I'element ou il est defini. 

• Le parametre auto laisse la main au navigateur. 

• Cette propriete est reconnue par tous les navigateurs du marche. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l "> 

<style type="text/css " media=" screen"> 

hi { font-style: italic;} 

</style> 

<style type="text/css " media="print"> 
hi { font-style: normal;} 
.normal { font-size: 120pt;} 
.break { font-size: 120pt; 

page-break-before : always; } 

</style> 

</head> 

<body> 

<hl class="normal">Page K/hl> 
<hl class="break">Page 2</hl> 
</body> 
</html> 



Ce qui donne a I'ecran 



Html5 - Mozilla Firefox4.0 Beta 6 



G 



Fichier Edition Affichage Historique Marque-pages Qutils ? 



Htm 1 5 



x +j±^ - ;_c_ fife tCs" I [D-fep-^ itfegir 



Page 1 
Page 2 
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L'apergu avant impression revele 




Page 2 



- 2- 



© E/V/ Editions - All rights reserved - Algeria Educ 



Saut de page arriere 

Cette propriete forcera un saut de page apres un element de la page. 



page-break-after : 


always; 




avoid; 




auto; 


Commentaires 



• Le parametre always force un saut de page apres I'element ou il est defini. 

• Le parametre avoid empeche un saut de page apres I'element ou il est defini. 

• Le parametre auto laisse la main au navigateur. 

• Cette propriete est reconnue par tous les navigateurs du marche. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l "> 

<style type="text/css " media=" screen"> 

hi { font-style: italic;} 

</style> 

<style type="text/css " media="print"> 
.normal { font-size: 120pt;} 
.break { font-size: 120pt; 

page-break-after : always; } 

</style> 

</head> 

<body> 

<hl class="break">Page K/hl> 
<hl class="normal">Page 2</hl> 
</body> 
</html> 



L'apergu apres impression fournit le meme resultat. 
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Eviter les sauts de page 

Cette propriete evitera le saut de page dans I'element designe. Particulierement utile pour eviter qu'un tableau soit 
imprime sur plusieurs pages. 



page-break-inside : 


always; 




avoid; 




auto; 


Commentaires 



• Le parametre always force un saut de page apres I'element ou il est defini. 

• Le parametre avoid empeche un saut de page apres I'element ou il est defini. 

• Le parametre auto laisse la main au navigateur. 

• Ace jour, cette propriete n'est reconnue que par le navigateur Opera. 
Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css " media=" screen"> 

hi { font-style: italic;} 

</style> 

<style type="text/css " media="print"> 

table { page-break-inside : avoid; } 

</style> 

</head> 

<body> 

<table> 

<tr> 

<td>K/td><td>2</td><td>3</td><td>4</tdxtd>5</td> 

<td>9 6</td><td>97</tdxtd>98</td><td>99</tdxtd>10 0</td> 

</tr> 

</table> 

</body> 

</html> 
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Le selecteur @page 



La specification CSS2 a ajoute le selecteur @page, reserve aux proprietes de style d'impression specifiques. 

Force est de constater que, meme des annees apres, peu de ces proprietes specifiques sont implementees dans les 
navigateurs meme recents alors que les specifications du W3C a ce sujet sont nombreuses et a priori fort pratiques. 

On pense au selecteur de page @page, qui etait implante dans le navigateur Opera 8+ et totalement ignore par les 
autres navigateurs. Pourtant, ces fonctions sont pour le moins allechantes. Citons les possibilites : 

• d'imprimer en mode portrait ou mode paysage. 

• de dimensionner la page imprimee. 

• d'ajouter des marques de decoupe. 

• de prevoir un style pour la premiere page, les pages de gauche et les pages de droite. 

• etc. 

Profitons de I'occasion pour explorer ces possibilites dans Opera 10.6. 
Exemple 1 

Forcer I'impression en mode paysage par @page{size: landscape; }. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css " media="print"> 

@page{ size: landscape;} 

.normal { font-size: 120pt;} 

.break { font-size: 120pt; 

page-break-after : always; } 

</style> 

</head> 

<body> 

<hl class="break">Page K/hl> 
<hl class="break">Page 2</hl> 
<hl class="normal">Page 3</hl> 
</body> 
</html> 



A I'ecran : 
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O Htm 15 - Opera 
Fichier Editer Afficher Signets Widgets 



J 



|i| Htm 15 



Page 1 
Page 2 
Page 3 



[ ^Zoom [100%}^ 



A I'impression (simulation) : 



Page 1 




Page 2 




Page 3 



Exemple 2 

Appliquer un style different aux pages de gauche et aux pages de droite par respectivement @page:ieft et 
@page:right pour tenir compte de la reliure par exemple. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css " media="print"> 

@page:left{ margin-right: 420px; } 

@page: right! margin-left: 420px; } 

.normal { font-size: 120pt;} 

.break { font-size: 120pt; 

page-break-after : always; } 

</style> 

</head> 

<body> 

<hl class="break">Page K/hl> 
<hl class="break">Page 2</hl> 
<hl class="normal">Page 3</hl> 
</body> 
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</html> 



A I'impression (simulation) 
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Les selecteurs CSS3 



Les selecteurs de base du CSS1 sont assez limites. Les specifications CSS2 et CSS3 ajoutent une multitude de 
selecteurs. 



1. Les selecteurs hierarchiques 



A B 


Descendants 


Selectionne tout element B qui est descendant d'un element 
A. 


A > B 


Enfants 


Selectionne tout element B qui est enfant direct d'un element 
A. 


A + B 


Frere adjacent 


Selectionne tout element B immediatement precede d'un 
element A. 



Exemple 1 



<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




<style type="text/css"> 




tdivision hi { width: 200px; 




background-color : 


#9cf; } 


hi { margin-top: 5px; 




margin-bottom: 5px; 




font-size: 20px; } 




p { margin-top: 5px; 




margin-bottom: 5px; } 




</style> 




</head> 




<body> 




<div id="division"> 




<hl>Titre K/hl> 




<div id="contenu" style="padding- 


-left: 20px;"> 


<hl> litre 1 bis</hl> 




<p>Paragraphe K/p> 




</div> 




<hl>Titre 2</hl> 




</div> 




</body> 




</html> 






Exemple 2 



© ENI Editions - All rights reserved - Algeria Educ 



- 1- 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
tdivision > hi { width: 200px; 

background-color: #9cf; } 
hi { margin-top: 5px; 

margin-bottom: 5px; 
font-size: 2 0px; } 
p { margin-top: 5px; 

margin-bottom: 5px; } 
</style> 
</head> 
<body> 

<div id="division"> 
<hl>Titre K/hl> 

<div id="contenu" style="padding-lef t : 20px; "> 
<hl> litre 1 bis</hl> 
<p>Paragraphe K/p> 
</div> 

<hl>Titre 2</hl> 

</div> 

</body> 

</html> 




Exemple 3 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
li.un + li { width: 200px; 

background-color: #9cf ; } 

</style> 
</head> 
<body> 
<ul> 

<li class="un">Item K/li> 

<li>Item 2</li> 

<li>Item 3</li> 

<li>Item 4</li> 

<li>Item 5</li> 

</ul> 

</body> 

</html> 



- 2- 



© ENI Editions - All rights reserved - Algeria Educ 




2. Les pseudo-classes de selection 



: root 


Represente I'element racine ou I'element le plus haut d'un document. Par 
exemple, en Html5, la balise <htmi>. 


• grnpty 


Correspond aux elements vides et qui n'ont done pas d'enfants. 


: only-child 


Reprend I'enfant unique. Celui-ci n'a done pas d'element frere. 


: first-child 


Selectionne le premier element enfant. 


: last-child 


Selectionne le dernier element enfant. 


: nth-child (n) 


Designe le nieme element enfant ou n est un nombre ou les mots-cles 
even (pairs) ou odd (impairs). 


: nth-last- child (n) 


Selectionne le nieme enfant en partant du dernier element. 


: only-of-type 


Reprend I'unique element de ce type. 


: f irst-of-type 


Represente le premier element de ce type. 


: last-of-type 


Represente le dernier element de ce type. 


: nth-of-type (n) 


Designe le nieme element de ce type ou n est un nombre ou les mots- 
cles even (pairs) ou odd (impairs). 


: nth-last-of-type (n) 


Selectionne le nieme element de ce type en partant du dernier element. 



Ces selecteurs sont implementes dans Firefox 3.6+, Safari 5 + , Chrome 7+, Opera 10.6+ et Internet Explorer 9 + . 



La numerotation de n commence a 1 et non pas a comme en JavaScript. 



Exemples 

Les exemples se basent sur le document Html5 suivant. II comprend une balise parent <ui> et cinq balises enfant 

<li>. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 
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<ul> 

<li>Item K/li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
<li>Item 5</li> 
</ul> 
</body> 
</html> 



Le premier item de la liste 

ul : first-child { background-color: #9cf; 



OU 



li : f irst-of-type { background-color: #9cf ; } 




Item 1 
Item 2 
Item 3 
Item 4 
Item 5 
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X 



Le dernier item de la liste 



ul : last-child { background-color: #9cf ; } 



OU 



li : last-of-type { background-color: #9cf;} 




■ Item 1 

• Item 2 

■ Item 3 
« Item 4 

* Item 



Le troisieme item de la liste 



ul : nth-child ( 3 ) { background-color: #9cf ; } 



OU 



li : nth-of-type (3 ) { background-color: #9cf; } 



- 4- 
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■ Item 1 

• Item 2 

• Item 3 
« Item 4 

• Item 5 



Le quatrieme item de la liste (ou le second en partant du dernier element) 

ul : nth-last-child ( 2 ) { background-color: #9cf ; } 



OU 



li : nth-last-of-type (2 ) { background-color: #9cf;} 




Item 1 
Item 2 
Item 3 
Item 4 
Item 5 



Les elements impairs 

ul : nth-child (odd) { background-color: #9cf; } 



OU 



li : nth-of-type (odd) { background-color: #9cf ; } 




Les elements pairs 

ul : nth-child (even) { background-color: #9cf ; } 
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ou 



li : nth-of-type (even) { background-color: #9cf;} 
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3. Les selecteurs d'attributs 



[attr] 


Designe un element qui comporte I'attribut attr indique. 


[attr=" valeur " ] 


Designe un element qui comporte I'attribut attr fourni par la valeur 
indiquee. 


[attr~="valeur " ] 


Correspond a tout element dont I'attribut attr contient une liste de 
valeurs separees par des espaces et dont I'une d'elles est valeur. 


[attr | ="valeur " ] 


Correspond a tout element dont I'attribut attr contient une liste de 
valeurs separees par des tirets debutant par valeur. 


[attr~=" valeur " ] 


Represente un element dont I'attribut attr commence avec le prefixe 
fourni par la valeur indiquee. 


[attr$="valeur " ] 


Represente un element dont I'attribut attr se termine avec le suffixe 
fourni par la valeur indiquee. 


[attr *=" valeur " ] 


Represente un element dont I'attribut attr contient une instance de la 
valeur indiquee. 



Ces selecteurs d'attributs sont implementes dans Firefox 3.6+, Safari 5 + , Chrome 7+, Opera 10.6+ et Internet 
Explorer 9+. 

Exemples 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

</head> 

<body> 

<div class="titre">Selecteurs d' attribut</div> 

<div name="un" >Lorem ipsum</div> 

<div title="deux">Lorem ipsum </div> 

<div title="trois">Lorem ipsum </div> 

<div name="dernier">Lorem ipsum </div> 

</body> 

</html> 



Element(s) avec I'attribut name 
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div[name] { background-color: #9cf ; } 




Selecteurs dattribut 
Lorem ipsum 
Lorem ipsum 
Lorein ipsum 
Lorem ipsum 



Element avec I'attribut class="titre" 



div [class="titre" ] { background-color: #9cf; 




C:\Users\Van Lai 



Selecteurs dattribut 
Lorem ipsum 
Lorem ipsum 
Lorem ipsum 
Lorem ipsum 



Element avec un attribut name qui commence par "de" 

div [name A ="de" ] { background-color: #9cf ; } 
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Selecteurs dattribut 
Lorem ipsum 
Lorem ipsum 
Lorem ipsum 
Lorem ipsum 



Element dont I'attribut title se termine par "x". 

div [title$="x" ] { background-color: #9cf ; } 
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Selecteurs dattribut 
Lorem ipsum 
Lorem ipsum 
Lorem ipsiitn 
Lorem ipsum 



Element dont I'attribut title contient "roi" 



div[title*="roi" ] (background-color: #9cf ; } 
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Selecteurs dattribut 
Lorem ipsum 
Lorem ipsum 
Lorem ipsum 
Lorem ipsum 



Notons qu'il est possible de combiner les selecteurs. 

div [name="un" ] [ class=" t it re" ] 
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Les bords arrondis 



Apres presque 20 ans de formes rectangulaires avec des angles droits et pointus, voici venir enfin les bords arrondis, 
tout en rondeurs. 

Jusqu'a present, les bords arrondis ne pouvaient etre realises que par une gymnastique qui relevait plus du rayon des 
trues et astuces avec de multiples divisions <div> et des images placees dans leur arriere-plan. Avec le CSS3, ces bords 
arrondis sont realises directement avec quelques lignes de proprietes de style. 



Les bords arrondis des quatre extremites sont introduits par la propriete : 



border-radius 


x y; 




ou x et y sont une valeur ou un pourcentage 



Les valeurs de x et y determinent les rayons horizontaux et verticaux d'un quart d'ellipse, ce qui induira la courbure de 
Tangle. 

Les exemples suivants sont plus parlants. 




X=50pxy=50px X=1 OOpx y=50px X=50px y=1 OOpx 



Une seule valeur peut etre indiquee. Dans ce cas, la valeur de x est egale a la valeur de y. 



Exemple 



<!DOCTYPE html> 


<html lang="fr"> 


<head> 




<title>Html5</title> 


<meta charset="iso-8859-l"> 


<style type="text/css "> 


fround { 


width: 200px; height: 80px; 




background-color : rgb (185, 205, 225); 




border: Ipx solid gray; 




border-radius: lem; } 


</style> 




</head> 




<body> 




<div id=' 


round" ></ div> 


</body> 




</html> 
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Cette propriete CSS3 est reconnue en I'etat par Internet Explorer 9 + , Opera 10. 6+, Safari 5+ et Chrome 7+. 

Et Firefox ? Une petite complication se presente. Firefox a introduit la propriete radius depuis de nombreuses annees, 
sans attendre les recommandations CSS3. Ainsi pour Firefox 3.6+, on utilisera la propriete border-radius precedee du 
prefixe -moz. Soit : 

-moz-border-radius : lem; 

Safari et Chrome, qui reprennent le moteur de rendu Webkit, ont egalement anticipe cette propriete CSS3 et leurs 
versions anterieures a celles signalees ci-avant necessitent le prefixe -webkit. Soit : 

-webkit-border-radius : lem; 

Une version parfaitement compatible de notre exemple devient alors : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css "> 

Iround { width: 200px; height: 80px; 

background-color: rgb (185, 205, 225) ; 

border: Ipx solid gray; 

border-radius: lem; 

-moz-border-radius : lem; 

-webkit-border-radius: lem;} 

</style> 

</head> 

<body> 

<div id="round"x/div> 

</body> 

</html> 



Comme souvent en CSS, il est possible de specifier independamment un angle pour chaque extremite. 



border- 


-t op- right- radius 


x y; 


border- 


-bottom-right -radius 


ou x et y sont une valeur ou un pourcentage 


border- 


-bottom-left -radius 




border- 


-top- left -radius 





border-top-left-radius: lOpx 5px; 

II est egalement possible de definir I'arrondi de chacun des angles, a I'aide d'une ecriture raccourcie qui se lit comme a 
I'accoutumee dans le sens des aiguilles d'une montre en debutant par le haut (top, right, bottom, left). 

border-radius: liste valeurs / liste valeurs 

La premiere liste de valeurs represents les rayons horizontaux des angles, la deuxieme liste represente les rayons 
verticaux des angles. 

border-radius: 5px lOpx 5px lOpx / lOpx 5px lOpx 5px; 

Les ecritures avec les prefixes -moz et -webkit sont : 



-moz 


-border- 


-radius 


-topright 


-moz 


-border- 


-radius 


-bottomr ight 


-moz 


-border- 


-radius 


-bottomlef t 


-moz 


-border- 


-radius 


-toplef t 
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-webkit 


-border 


-top-right -radius 


-webkit 


-border 


-bottom-right -radius 


-webkit 


-border 


-bottom-left-radius 


-webkit 


-border 


-top-left -radius 



II faut souligner la position differente du mot radius et la difference entre top-right et topright. 
Tout ceci permet des figures assez inhabituelles dans le design des pages. 



Exemple 1 



< 1D0CTYPE 


html> 


<html lang="fr"> 


<head> 




<title>Html5</title> 


<meta charset=" iso-8859-1 "> 


<style type="text/css"> 


#roundl { 


width: 70px; height: 70px; 




background- co lor : rgb (185,205,225) ; 




border: Ipx solid gray; 




border-radius: 35px; 




-moz-border-radius : 35px; 




-webkit-border-radius : 35px; } 


#round2 { 


width: 12em; height: 4em; 




background- co lor : rgb (185,205,225); 




border: Ipx solid gray; 




border-radius: lem 4em lem 4em; 




-moz-border-radius: lem 4em lem 4em; 




-webkit-border-radius: lem 4em lem 4em; } 


</style> 




</head> 




<body> 




<px/p> 




<div id=" 


roundl " ></div> 


<px/p> 




<div id=" 


round2 "></div> 


</body> 




</html> 






Exemple 2 

Les bords arrondis ne s'appliquent pas qu'aux divisions <div>. Voici une application dans un tableau. 

<!DOCTYPE html> 
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<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type=' text/ess' > 
table { width: 200px; 

background-color : rgb (185, 205, 225) ; 

text-align: center; 

margin : 30px; 

border : lpx solid gray; 

border-radius : lOpx; 

-moz-border-radius : lOpx; 

-webkit-border-radius : lOpx; } 
</style> 
</head> 
<body> 
<table> 

<trxtd>K/td><td>2</td><td>3</td></tr> 

<tr><td>4</td><td>5</td><td>6</td></tr> 

<trxtd>7</td><td>8</td><td>9</tdx/tr> 

</table> 

</body> 

</html> 
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Les bords arrondis ne sont pas possibles avec la propriete collapse. 
Exemple 3 

Les bords ronds peuvent aussi s'appliquer a des images et ce, sans passer par un programme graphique. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

f round { width: 250px; height: 108px; 

border-radius: lem; 

-moz-border-radius: lem; 

-webkit-border-radius: lem; 

border: lpx solid gray; 

background- image : url (blue.png) ; 

</style> 

</head> 

<body> 

<div id="round"x/div> 

</body> 

</html> 
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Les bordures imagees 



Une des nouveautes des CSS3 est de permettre I'utilisation d'une image pour I'appliquer a la bordure d'un element 
boite. 

La propriete border-image prend une image rectangulaire et la divise en 9 parties (voir capture d'ecran ci-dessous). Les 
8 parties du contour sont alors utilisees pour les angles et les cotes. Le centre est cache pour permettre I'affichage du 
contenu. 




L'ecriture de cette propriete est assez complexe. 



border-image 


ur 1 ( f ichier_image ) abed valeur valeur; 




OU 




uri (fichier_image) est I'adresse relative de I'image servant a 




confectionner les bordures. 




a, b, c et d sont la dimension d'un morceau de la grille dans les cotes de 




la bordure. 




valeur SOit round, repeat OU stretch. 



Soit par exemple : 



border-image: url (border . png) 27 27 27 27 round round; 



Commentaires 

• On peut ne signaler qu'un parametre. Dans ce cas, celui-ci est applique pour les quatre cotes. Avec deux 
parametres, ceux-ci determinent la dimension des cotes superieur/inferieur et gauche/droite. Trois parametres, 
respectivement le cote superieur, gauche/droite et inferieur. Et enfin quatre parametres, dans I'ordre, bord 
superieur, bord droit, bord inferieur et bord gauche. 

• Le mot-cle round reproduit les images et redimensionne celles-ci afin qu'elles s'ajustent exactement a la largeur 
et la hauteur de I'element. Le mot-cle repeat (non repris par certains navigateurs) effectue le meme travail que 
round mais sans ajustement. Et enfin, stretch (defaut) etire I'image aux dimensions de la boite. Une seule 
valeur determine les quatre cotes. Deux valeurs s'appliquent respectivement au cote superieur/inferieur et 
gauche/droit. 

La propriete border-image est reprise par Firefox 3.6+, Safari 3 + , Chrome 2+ et Opera 10. 6 + . El le n'est pas integree 
dans Internet Explorer 9. 

Exemple 1 

Au depart de I'image (border. png) reproduite ci-avant et disponible dans I'espace de telechargement. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
#box { width:220px; height: 80px; 
border-width : 20px; 

border-image : url (border . png) 30 30 round; 
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-moz-border-image : url (border . png) 30 30 round; 

-webkit-border-image : url (border . png) 30 30 round; 

padding: lOpx; 

text-align: center;) 
</style> 
</head> 
<body> 

<div id="box"xhl>Html5 et CSS3</hlx/div> 

</body> 

</html> 



Remarquez qu'il est necessaire de fixer la largeur de la bordure (border-width). Ce qui parait logique. 



|.c= |. ED | 22 f 


W D Htm 15 \ * 


O file:///C:/Users/Van%20Lancker ' 







Exemple 2 

Avec la valeur d'etirement stretch : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
#box { width :220px; height: 80px; 
border-width : 20px; 

border-image : url (border . png) 30 30 round stretch; 

-moz-border-image : url (border . png) 30 30 round stretch; 

-webkit-border-image : url (border . png) 30 30 round stretch; 

padding: lOpx; 

text-align: center;) 
</style> 
</head> 
<body> 

<div id="box"xhl>Html5 et CSS3</hlx/div> 

</body> 

</html> 
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Exemple 3 

Soit I'image de depart (border_image.png), 




<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css "> 
#box { width :220px; height: 80px; 
border-width : 20px; 

border-image : url (border_image . png) 30 30 round; 

-moz-border-image : url (border_image . png) 30 30 round; 

-webkit-border-image : url (border_image . png) 30 30 round; 

padding: lOpx; 

text-align: center;) 
</style> 
</head> 
<body> 

<div id="box"xhl>Html5 et CSS3</hlx/div> 

</body> 

</html> 
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Les ombres 

Avec les proprieties CSS3, il est a present possible d'ajouter un effet d'ombre sur le texte ou les elements boite. 



1. Les ombres sur le texte 



text-shadow: 


x y z couleur OU 




- x est le deport de I'ombre vers la droite. 




- y est le deport de I'ombre vers le bas. 




- z est I'intensite du degrade ou du flou (facultatif, par defaut 0). 




- couleur est la couleur de I'ombre. 



Les parametres x et y admettent des valeurs negatives. Le deport de I'ombre est alors respectivement vers la 
gauche et vers le haut. 

Cette propriete de style est integree par Firefox 3.6+, Safari 3 + , Chrome 2+ et Opera 10 + . 

Pour Internet Explorer (meme la version 9), il faut passer par le filtre proprietaire Microsoft shadow. Pour un effet 
d'ombrage compatible, il faut ainsi ajouter par exemple : 

.ombrage { 

filter : progid : DXImageTransf orm . Microsoft . Shadow (color= '#999999' , 
Direct ion=l 35, 
Strength=4) ; ) 



Exemple 



<!DOCTYPE 


html> 


<html lang="fr"> 


<head> 




<title>Html5</title> 


<meta charset="iso-8859-l"> 


<style type=' text/ess ' > 


.ombre { 


text-shadow: 2px 2px 4px #999; 




filter : progid : DXImageTransf orm .Microsoft . Shadow ( color=' #aaaaaa' , 




Direction=135, Strength=6) ; } 


.relief { 


color : white; 




text-shadow: 2px 2px 3px black; 




filter:progid: DXImageTransf orm. Microsoft . Shadow (color='#aaaaaa' , 




Direction=135, Strength=12 ) ; } 


</style> 




</head> 




<body> 




<hl class 


="ombre">Html5 + CSS3</hl> 


<hl class 


="relief ">Editions Eni</hl> 


</body> 




</html> 
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Pour les amateurs de precision, text-shadow etait inclus dans la specification CSS2 (d'ou I'absence de prefixes). II a 
ete retire de la CSS2.1 et revient avec les CSS3. 



2. Les ombres sur les elements boite 



box-shadow 



x y z couleur OU 

- x est le deport de I'ombre vers la droite. 

- y est le deport de I'ombre vers le bas. 

- z est I'intensite du degrade ou du flou (facultatif, par defaut 0). 

- couleur est la couleur de I'ombre. 



Les parametres x et y admettent des valeurs negatives. Le deport de I'ombre est alors respectivement vers la 
gauche et vers le haut. 

Notons que la propriete s'applique sur la boite de I'element et non sur sa bordure. L'ombrage n'affecte done pas la 
taille de la boite de I'element. 

Cette propriete de style est integree par Firefox 3.6+, Safari 3 + , Chrome 2+ et Opera 10. 6+. 

Comme propriete CSS3, il faut ajouter les prefixes -moz pour Firefox et -webkit pour Safari et Chrome. 

Pour Internet Explorer (meme la version 9), il faut passer par le filtre proprietaire Microsoft shadow. Pour un effet 
d'ombrage compatible, il faut ajouter par exemple : 

. ombrage { filter:progid: DXImageTransf orm .Microsoft . Shadow ( color=' #aaaaaa' , 
Direction=135, Strength=12 ) ; } 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

.ombre { border: 3px solid white; 

box-shadow: 2px 2px 12px black; 

-moz-box-shadow : 2px 2px 12px black; 

-webkit-box-shadow : 2px 2px 12px black; 

filter : progid : DXImageTransf orm . Microsoft . Shadow ( color=' #aaaaaa' 
Direction=135, Strength=12 ) ; } 

</style> 

</head> 

<body> 

<img src="blue .png" class="ombre" alt=""> 

</body> 

</html> 



- 2- 



© ENI Editions - All rights reserved - Algeria Educ 




© ENI Editions - All rights reserved - Algeria Educ 



- 3- 



Les polices personnalisees 



Jusqu'a present les pages Web n'etaient pas une merveille de typographie. En effet, comme les polices dependent de 
celles installees sur I'ordinateur de I'internaute, peu de polices sont a la fois disponibles sur les postes equipes de 
Windows ou Mac. 

Les CSS3 permettent d'importer et d'utiliser une police personnalisee meme si celle-ci n'est pas installee chez 
I'utilisateur. Cette propriete @font-face constitue ainsi une innovation significative pour les webgraphistes qui pourront 
ainsi reprendre des typographies plus creatives. 

L'adoption d'une police particuliere s'effectue en deux temps. 

II faut d'abord telecharger la police de caracteres pour I'incorporer dans la page. 

@font-face { font-family: "nom_police" ; 

url ( "nom_police . extension_police " ) ; ) 



Commentaires 

• font-family: "nom_poiice" indique sous quel nom la police sera utilisee dans le code de la page. 

• url ( "nom_poiice . extension_poiice" ) indique I'url en adressage relatif ou absolu de la police personnalisee. En 
adressage relatif, la police sera ainsi presente dans le repertoire du site comme une image ou un fichier de 
feuille de style externe. On retiendra de preference des polices adaptees au Web (webfonts) dont la taille 
reduite ne penalisera pas le temps de telechargement. 

• extension_poiice determine I'extension d'une police de caracteres, par exemple I'extension ttf {True Type 
Fonts). 

Une fois la police telechargee avec @font-face, celle-ci peut etre appliquee a un element, comme n'importe quelle police, 
avec la propriete font-family. 



Exemple 



<!DOCTYPE html> 


<html lang= 


'fr"> 


<head> 




<title>Html5</title> 


<meta charset="iso-8859-l"> 


<style type= 


="text/css"> 


@f ont-f ace 


font-family: "mapolice"; 




src: url ( ' f antaisie . ttf ' ) ; ) 


.fontface { 


font: lOOpx mapolice, fantasy;} 


</style> 




</head> 




<body> 




<div class= 


'fontface">Html5 + CSS3</div> 


</body> 




</html> 





La police fantaisie.ttf est disponible dans I'espace de telechargement dedie a cet ouvrage. 
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Ceci fonctionne parfaitement avec Firefox 3.6+, Safari 5+, Chrome 5+ et Opera 10. 6+. 

Internet Explorer 9 reconnaTt lui aussi la propriete @font-face mais ne prend en compte que la police au format eot 
{Embedded OpenType), proprietaire Microsoft. 

Un script compatible pourrait etre : 

@font-face { font-family: "Boston"; 

src: url ( ' boston_traf f ic . eot' ) ; 
src: url ( ' boston_traf f ic . ttf ' ) ; } 

Mais, Internet Explorer a quelques difficultes avec I'attribut src lorsqu'il appelle tantot une police eot et tantot une 
police ttf. 

II faudra mettre en place une astuce pour rendre la feuille de style compatible avec tous les navigateurs de notre etude. 

<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

@font-face { 

font-family: 'Boston'; 

src: url ( ' boston_traf f ic . eot ' ) ; 

src : local ( ' x' ) , 

url ( ' boston_traf f ic .ttf ) format ( ' TrueType' ) ; } 

.police (font: 40px 'Boston', Arial, sans-serif;} 

</style> 

</head> 

<body> 

<px/p> 

<p class="police " >Lorem ipsum dolor sit amet, consectetuer 

adipiscing elit.</p> 

</body> 

</html> 



Parmi les attributs que Ton peut ajouter a la propriete @font-face, il existe I'attribut (facultatif) local ( "nom_poiice" ) qui 
demande au navigateur de verifier s'il existe une version locale de la police avant de la telecharger. Internet Explorer 
telecharge bien la police eot mais bloque sur le local ("x") qu'il ne reconnaTt pas et ne se preoccupera done pas de la 
police ttf. Les autres navigateurs, ne trouvant pas en local la police x, telechargeront alors la police ttf. 

Les polices boston_traffic.eot et boston_traffic.ttf sont disponibles dans I'espace de telechargement. 
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II existe un autre moyen d'uti liser des polices particulieres sur une page Web sans avoir a s'occuper de @font-face et 
parfaitement compatible avec les differents navigateurs. II consiste a passer par Google Font Api. Les polices proposees 
par ce service sont parfaitement adaptees a I'affichage dans un navigateur et d'un poids reduit. 

II suffit simplement d'ajouter une feuille de style a votre page Html afin d'obtenir la nouvelle police. 

<link 

href =' http : / / fonts . googleapis . com/ ess ? f ami ly=Reenie+Beanie& subset =lat in' 
rel=' stylesheet' type=' text/css'> 

II suffit alors de I'appliquer dans une classe CSS avec la propriete font-family. 

II ne faut done pas passer par la propriete @font-face, ni s'occuper du format de la police. Tout est gere par Google afin 
d'assurer le meilleur affichage de celle-ci dans le navigateur. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<link 

href =' http : / /fonts . googleapis . com/ ess ?f ami ly=Reenie+Beanie& subset = 

latin' rel=' stylesheet' type=' text/ess' > 

<style> 

hi { font-family: 'Reenie Beanie', arial, serif; } 

</style> 

<body> 

<hl>Making the Web Beautiful !</hl> 

</body 

</html> 
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Pour trouver des polices de caracteres adaptees au Web, une recherche sur Google avec le mot-cle webfont vous 
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fournira I'adresse de sites specialises. 
Citons neanmoins : 



• www.fontsquirrel.com/ 

• kernest.com/ 

• www.webfontlist.com/ 



• www.smashingmagazine.com/2007/ll/08/40-excellent-freefonts-for-professional-design/ 

N'oubliez pas qu'il peut exister un copyright sur les polices et que certaines sont payantes. 

II subsiste la question de savoir comment convertir des polices ttf en format eot ou d'autres formats de polices. 

II y a bien entendu le logiciel vieillissant et peu ergonomique Microsoft Weft pour convertir en format eot. On lui 
preferera un convertisseur en ligne a I'adresse www.kirsle.net/wizards/ttf2eot.cgi ou le programme eotfast 
(http://eotfast.com/). 

Un convertisseur multiformats en ligne, en frangais, est quant a lui disponible a I'adresse 
http://www.convertissez.fr/convertisseur-police.php. 
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Ajuster la hauteur des caracteres 



Des polices differentes, malgre une taille de caracteres identique, peuvent paraitre plus grandes ou plus petites que 
les polices avoisinantes. 

abc ahc 

En outre, avec la propriete font-family, vous n'avez pas la maltrise de la police reellement affichee. En effet, 
lorsqu'une police de caracteres n'existe pas sur I'ordinateur de I'utilisateur, les navigateurs utilisent une police de 
remplacement. Celle-ci n'a pas forcement les memes caracteristiques dimensionnelles que la police originale, et ce, 
meme si la taille des caracteres est identique. 

La propriete font-size-adjust permet d'obtenir des caracteres toujours de la meme taille, aussi bien pour les 
majuscules que pour les minuscules, en figeant le coefficient d'aspect. La propriete font-size-adjust doit etre definie a 
la valeur du coefficient d'aspect de la police preferentielle. 

font-size-adjust: 0.465; 

Ce coefficient d'aspect peut se definir par tatonnements, mais il est plus simple de consulter des sites comme 
www.brunildo.org/test/aspect-table.html, qui sont dedies a cette tache. 

Pour I'instant, seul Firefox 3.6+ a integre la propriete font-size-adjust, pourtant bien utile. 
Exemple sans font-size-adjust 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
div { width: 200px; 

float: left; 

margin-right: 15px; } 
#calibri p { font: 14px Calibri sans-serif; } 
tverdana p { font: 14px Verdana, sans-serif;} 
</style> 
</head> 
<body> 

<div id=" calibri " > 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 
non risus. Suspendisse lectus tortor, dignissim sit amet, 
adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 
diam. Maecenas ligula massa, varius a, semper congue, euismod non, 
mi. </p> 
</div> 

<div id="verdana"> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 

non risus. Suspendisse lectus tortor, dignissim sit amet, 

adipiscing nec, ultricies sed, dolor. Cras elementum ultrices 

diam. Maecenas ligula massa, varius a, semper congue, euismod non, 

mi. </p> 

</div> 

</body> 

</html> 
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Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Sed 
non risus. Suspendisse lectus tortor 
dignissim sit amet, adipiscing nec, 
ultricies sed ; dolor. Cras 
elernentum ultrices diam. 
Maecenas ligula massa, varius a, 
semper congue, euismod non, mi. 



Termine 



Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, 
Sed non risus, Suspendisse 
lectus tortor, dignissim sit 
amet, adipiscing nec, 
ultricies sed, doior. Cras 
elernentum ultrices diam. 
Maecenas ligula massa, 
varius a, semper congue, 
euismod non, mi. 



e 



Exemple avec font-size-adjust 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css "> 
div { width: 200px; 

float : left; 

margin-right : 20px; } 
#calibri p { font:14px Calibri, sans-serif;} 
Iverdana p { font: 14px Verdana, sans-serif; 

font-size-adjust: 0.465;} 

</style> 

</head> 

<body> 

<div id=" calibri " > 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 
non risus. Suspendisse lectus tortor, dignissim sit amet, 
adipiscing nec, ultricies sed, dolor. Cras elernentum ultrices 
diam. Maecenas ligula massa, varius a, semper congue, euismod non, 
mi. </p> 
</div> 

<div id="verdana"> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 

non risus. Suspendisse lectus tortor, dignissim sit amet, 

adipiscing nec, ultricies sed, dolor. Cras elernentum ultrices 

diam. Maecenas ligula massa, varius a, semper congue, euismod non, 

mi. </p> 

</div> 

</body> 

</html> 
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Lorem ipsum dolor sit amet, 
consectetuer adipiscing el it. Sed 
non risus. Suspendisse lectus 
tortor, dignissim sit amet, 
adipiscing nee, ultricies sed, dolor. 
Cras elementum ultrices diam. 
Maecenas ligula massa, varius a, 
semper congue, euismod non, mi. 



Lorem ipsum dofor sit amet, 
consectetuer adipiscing elit. Sed 
non risus. Suspendisse lectus 
tortor, dignissim sit amet, 
adipiscing nee, ultricies sed, 
dolor. Cras elementum ultrices 
diam. Maecenas ligula rnassa, 
varius a, semper congue, 
euismod non, mi. 



Termine 



Pour une information plus fouillee sur la propriete font-size-adjust, consultez 
design.com/site/index.php/2010/04/12/262-mais-c-est-quoi-au-juste-font-size-adjust. 



la page www.babylon- 
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Les arriere-plans multiples 



Les CSS 3 rendent possible I'affichage de plusieurs images dans un meme arriere-plan en permettant de cumuler les 
valeurs au sein des proprieties background-image, background-position et background-repeat (Partie CSS - Les arriere- 
plans). 

Cet effet n'etait possible qu'en superposant des divisions <div> definies en position absolue, un peu a la maniere des 
caiques dans les applications graphiques. 

Tous les navigateurs de notre etude reconnaissent les arriere-plans multiples, soit Internet Explorer 9, Firefox 3.6+, 
Opera 10. 1 + , Safari 4+ et Chrome 4+. 



Exemple 



Soit les images florel.png, flore2.png, flore3.png et flore4.png : 




<!DOCTYPE html> 




<html lang="fr"> 




<head> 




<title>Html5</title> 




<meta charset="iso-8859-l"> 




<style type="text/css"> 




#box { width :300px; height: 200px; 




border: lpx solid gray; 




background: url (f lorel .png) 


top left no-repeat, 


url (flore2 .png) 


top right no-repeat, 


url (f lore3 .png) 


bottom right no-repeat, 


url (flore4 .png) 


bottom left no-repeat;} 


</style> 




</head> 




<body> 




<div id="box"x/div> 




</body> 




</html> 
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Le degrade de couleurs 



Les standards CSS pour les degrades de couleurs ne sont pas encore finalises. Ce qui n'a pas empeche Firefox, Safari 
et Google Chrome de les implanter. 

Qu'en est-il des prefixes -moz et -webkit ? Pour cette propriete, la definition des prefixes est fort differente. 
Pour webkit 



Les degrades lineaires, pour les navigateurs Safari et Chrome, s'ecrivent selon la propriete : 



background : 


-webkit-gradient (linear, origine, fin, from (couleur) , to 
(couleur) ) ; 




ou : 






• 


linear pour les degrades lineaires. 




• 


origine est le point de depart du degrade. Celui-ci est determine 
par deux valeurs separees par un espace. La syntaxe supporte 
des nombres, des pourcentages ou les mots-cles top, right, 
bottom et left. Soit, par exemple, top left. 




• 


fin est le point de fin du degrade. Celui-ci est determine par 
deux valeurs separees par un espace. La syntaxe supporte des 
nombres, des pourcentages ou les mots-cles top, right, bottom 
et left. Soit, par exemple, bottom right. 




• 


from(couieur) , la couleur de debut du degrade. 




• 


to (couleur) , la couleur de fin du degrade. 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l "> 
<style type="text/css"> 
#box { width:250px; height: 80px; 
border: lpx solid gray; 

background: -webkit-gradient (linear, left top, right 

bottom, from(#7DA5CD) , to (white));} 
</style> 
</head> 
<body> 

<div id="box"x/div> 

</body> 

</html> 
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Pour les degrades circulaires, la propriete est 



background : 



-webkit-gradient ( radial , origine, radiusl, fin, radius2, f rom (couleur ) , to 
(couleur) ) ; 

ou : 



• radial pour les degrades circulaires. 



• origine est le point de depart du degrade, soit du cercle interieur. Celui-ci 
est determine par deux valeurs separees par un espace. La syntaxe 
supporte des nombres, des pourcentages ou les mots-cles top, right, 
bottom, left et center. Soit, par exemple, center center. 



• radiusl est le radius du cercle interieur. 



• fin est le point de fin du degrade. Celui-ci est determine par deux valeurs 
separees par un espace. La syntaxe supporte des nombres, des 

pourcentages OU les motS-CleS top, right, bottom, left et center. 



• radius 2 est le radius du cercle exterieur. 



• from(couieur) , la couleur de debut du degrade, soit du cercle interieur. 



• to (couleur) , la couleur de fin du degrade, soit du cercle exterieur. 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
#box { width :200px; height: 200px; 
border: lpx solid gray; 

background: -webkit-gradient (radial, center center, 0, 
center center, 150, from(white), to (#7DA5CD) ) ; } 

</style> 

</head> 

<body> 

<px/p> 

<div id="box"x/div> 

</body> 

</html> 
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Pour Mozilla Firefox 

Pour les degrades lineaires 



background : 



-moz-linear-gradient (point d'origine, couleur de depart, couleur fin); 
OU 

• linear pour les degrades lineaires. 

• point d'origine est a choisir entre top, right, bottom ou left ou une paire 
de valeurs (separees par un espace) elaboree a partir de top, right, bottom 

OU left. 



• couleur d' origine pour couleur de depart du degrade. 



• couleur fin pour la couleur avec laquelle se termine le degrade. 



Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
#box { width :250px; height: 80px; 
border: lpx solid gray; 

background: -moz-linear-gradient (top left, #7DA5CD, 
#f f f f f f ) ; } 

</style> 

</head> 

<body> 

<div id="box"x/div> 

</body> 

</html> 
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Termine 



Pour les degrades circulaires : 



background : 



-moz-radial-gradient (position, forme, couleur debut, couleur fin) ; 
OU 

• radial pour les degrades circulaires. 

• position est le point central du gradient radial. Mot-cle a choisir entre top, 

right, bottom, left, center ou une paire de valeurs (separees par un 
espace) elaboree a partir de top, right, bottom, left ou center. Par 
exemple, center center. 

• forme, la forme du gradient radial soit circle (circulaire) ou ellipse 
(elliptique). 



• couleur debut, couleur fin. La couleur de debut du degrade et celle de fin. 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
#box { width :200px; height: 150px; 
border: lpx solid gray; 

background: -moz-radial-gradient (top left, circle, white, 

#7DA5CD) ; ) 
</style> 
</head> 
<body> 
<p></p> 

<div id="box"x/div> 

</body> 

</html> 
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Mozilla Firefox ajoute encore bien d'autres options permettant de creer des gradients de plus en plus complexes. 
Pour Internet Explorer 8+ 

Internet Explorer ne reprend pas la propriete de style gradient. II se rabat sur un filtre proprietaires Microsoft. 

filter : progid : DXImageTrans form . Microsoft .Gradient ( Start ColorStr='#0 0FF0 0' , 
EndColorStr=' #000000' , GradientType=l ) ; 

Avec startcoiorstr pour la couleur de depart, EndCoiorstr pour la couleur de fin et gradientType avec une valeur 
pour les degrades verticaux et une valeur de 1 pour les degrades horizontaux. 

Le code d'un degrade compatible serait : 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

#box { width:250px; height: 80px; 

border: lpx solid gray; 

background-color: #7DA5CD; 

filter:progid: DXImageTrans form . Microsoft . Gradient ( 
StartColorStr=' #7DA5CD' , EndColor Str=' #ffff ff ' , 
GradientType=l) ; 

background: -moz-linear-gradient (top left, #7DA5CD, 
#f f f f f f ) ; 

background: -webkit-gradient (linear, left top, right 

bottom, from(#7DA5CD) , to (white));} 
</style> 
</head> 
<body> 

<div id="box"x/div> 

</body> 

</html> 
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L'opacite ou la transparence 



Avec les CSS3, il est possible de faire varier l'opacite ou la transparence d'un element. 

Cette propriete a ete adoptee tres tot et est ainsi compatible avec Firefox 1 + , Safari 1 + , Chrome 1+ et Opera 9 + . 
II n'est done pas necessaire de se preoccuper des prefixes -moz et -webkit. 



opacity : 



Valeur comprise entre 1 et 0. Avec la valeur 1, l'opacite est complete et la 
transparence nulle. Avec 0, l'opacite est nulle et I'element completement 
transparent. 



Commentaires 



• Le resultat de la propriete opacity est assez proche de celui de la notation de couleur RGBa avec 
transparence. II faut cependant noter que la propriete opacity s'applique a I'element dans son integralite, soit 
a tous ses descendants. RGBa ne s'applique uniquement qu'a I'element selectionne. 

• L'element dote de la propriete opacity est translucide. II laisse apparaitre I'element qui se trouve 
eventuellement situe en dessous de lui (voir exemple ci-apres). 

A ce stade de notre etude des CSS3, on ne s'etonnera plus du fait qu'Internet Explorer ne reprenne pas la propriete 
opacity. II est necessaire de passer par le filtre alpha, proprietaire Microsoft. 

filter :aipha (opacity=x) ou x est une valeur comprise entre 100 et 0. 
Exemple 1 



<!DOCTYPE html> 






<html lang="fr"> 






<head> 






<title>Html5</title> 






<meta charset="iso-8859-l"> 






<body> 






<img src=" f leur . png" style= 


'opacity : 


1; 


filter:alpha(opacity=100) "> 






<img src=" f leur . png" style= 


'opacity : 


. 6; 


filter : alpha (opacity=60 ) "> 






<img src=" f leur . png" style= 


'opacity : 


0.3; 


filter : alpha ( opacity =3 ) "> 






</body> 






</html> 








Htrnl5 - Moiilla Firefox 4.0 
Fichier Edition Affichage Historique Marque- pages Outils ? 



J □ HtmIS 

- | e~ 1 1 ♦ ; I 'd ^ ^ - 1 [ d - ] : R^g^ 




Exemple 2 
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Illustrons la translucidite. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

div . background { width: 250px; height: 108px; 

background : ur 1 (blue . png) ; 
border:2px solid black;} 
div. box { width: 200px; height: 60px; 

margin :24px 25px; 

border: Ipx solid black; 

background- co lo r : #f f f f f f ; 

filter : alpha (opacity=50 ) ; 

opacity : . 5 ; 

text-align: center;} 

</style> 
</head> 
<body> 
<px/p> 

<div class="background"> 

<div class="box"> 

<h2>Lorem ipsum dolor</h2> 

</div> 

</div> 

</body> 

</html> 



^^^^ 
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Exemple 3 

II est tentant de modifier I'opacite de I'image au survol du curseur de la souris. 



<!D0CTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<body> 

<img src="hiver . jpg" style="opacity : 0.4; 
filter : alpha (opacity =4 ) " 

onmouseover=" this .style . opacity=l ; this. filters. alpha . opacity=l " 

onmouseout="this . style . opacity=0 . 4 ; 

this. filters. alpha . opacity=4 " > 

</body> 

</html> 
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Dans un premier temps, I'image s'affiche avec une opacite de 0.4. Au survol du curseur de la souris (onmouseover), celle- 
ci s'affiche avec une opacite maximale. Lorsque le curseur quitte celle-ci (onmouseout), I'image revient dans son etat 
initial avec une opacite de 0.4. 
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Les colonnes multiples 

Presenter un contenu en plusieurs colonnes comme avec Adobe InDesign est une autre nouveaute des CSS3. 



column- 


-count : 


Entier qui determine le nombre de colonnes dans lesquelles sera affiche le 
contenu de I'element. 


column- 


-width : 


Valeur qui decrit la largeur optimale de chaque colonne (facultatif). 


column- 


-gap: 


Valeur qui determine I'espace ou le padding entre les colonnes. 


column- 


-rule : 


Definit une bordure entre les colonnes. 



A ce jour, les colonnes multiples ne sont pas reprises par Internet Explorer 9 et Opera 10.6. Seuls Firefox 3 + , Safari 
3.1+ et Chrome 4+ permettent cette mise en page mais avec respectivement les prefixes -moz et -webkit. 



-moz 


-column- 


-count : 


-webkit- 


-column- 


-count : 


-moz 


-column- 


-width : 


-webkit- 


-column- 


-width : 


-moz 


-column- 


-gap: 


-webkit- 


-column- 


-gap: 


-moz 


-column- 


-rule : 


-webkit- 


-column- 


-rule : 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css "> 

#box { width:420px; height: 240px; 

text-align: justify; 

column-count: 2; 

column-gap: 2em; 

column-rule: lpx solid silver; 

-moz-column-count : 2; 

-moz-column-gap : 2em; 

-moz-column-rule : lpx solid silver; 

-webkit-column-count : 2; 

-webkit-column-gap : 2em; 

-webkit-column-rule : lpx solid silver;} 
</style> 
</head> 
<body> 

<div id="box"> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non 

risus. Suspendisse lectus tortor, dignissim sit in amet, 

adipiscing nec, . . . 

</div> 

</body> 

</html> 
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Lorem ipsum dolor sit amet 
consectetuer adipiscing elit. Sed 
non risus. Suspendisse lectus 
tortor, dignissim sit in amet 
adipiscing nec : ultricies sed 
dolor. Cras elementum ultrices 
diam. Maecenas des ligula 
massa, varhis a., semper congue : 
euismod sed die non, mi. Proin 
porttitor, orci nec nonummy 
molestie : enim est eleifend mi : 
non fermentum diam nisi sit 



amet erat. Duis semper. Duis 
arcu massa : scelerisque vitae : 
consequat in : pretium a, enim. 
Pellentesque congue. Ut in risus 
vohitpat liber o pharetra temp or. 
Cras sed est non mi vestibutum 
bibendum in augue. Praesent 
egestas leo in pede. Praesent 
blandit odio eu orci enim. 
Pellentesque sed dui ut augue 
blandit sodales. VestibutLtm ante 
ipsum primis in faucibus. 
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Transformations 



Encore une propriete CSS3 dont les resultats sont pour le moins spectaculaires. En effet, elles brisent le carcan 
rectangulaire du design des pages Web. Cette propriete permet d'appliquer des transformations sur un element 
comme la rotation, le decalage, le zoom ou la deformation oblique. Associe aux transitions (voir point suivant), ce 
binome de choc risque de modifier profondement la mise en page des sites du futur. 



En outre, si pour I'instant ces transformations sont en 2D, la 3D est deja annoncee. 



transform: 


rotate (angle) , rotateX (angle) , rotateY (angle) 




scale (nombre) , scaleX (nombre) , scaleY (nombre) 




skew (angle), skewX (angle) , skewY (angle) 




translate (longueur) , translate ( longueur ) , translate (longueur) 



Comme toujours avec les CSS3 experimentales, la propriete transform se decline avec un prefixe selon les 
navigateurs : 

-webkit -trans form, 
-moz-transf orm. 
-o-tranform . 

La propriete transform est prise en charge par presque tous les navigateurs de notre etude (Firefox 3.6+, Opera 
10. 6+, Safari 4+, Chrome 4+). Elle est par contre encore ignoree par Internet Explorer 9. 

Passons en revue les differents parametres de cette propriete transform. 
Rotation 

La rotation d'un element est obtenue par le parametre rotate (angle) ou Tangle peut etre defini en degres (deg), 
radians (rad) ou gradients (grad). Les valeurs positives effectuent la rotation de Telement dans le sens des aiguilles 
d'une montre et les valeurs negatives tournent celui-ci dans le sens inverse. Lorsqu'une seule valeur est indiquee, 
celle-ci prevaut pour les deux axes X et Y. Avec deux valeurs, celles-ci s'appliquent a I'axe des X et des Y. 

Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

body { padding-left: 15px; } 

#box { width:200px; height: 80px; 

font-size: 70px; 

border: lpx solid black; 

padding-left: lOpx; 

-moz-transf orm: rotate (-20deg) ; 

-webkit-transf orm: rotate (-20deg) ; 

-o-transform: rotate (-20deg) ; 

transform: rotate ( -2 Odeg) ; } 
</style> 
</head> 
<body> 

<hl id="box">CSS 3</hi> 

</body> 

</html> 
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Modification d'echelle 

La modification de I'echelle d'un element est obtenue par le parametre scale (nombre) ou le nombre peut etre un entier 
ou un decimal, positif ou negatif. Les valeurs positives effectuent un zoom avant et les valeurs negatives, un zoom 
arriere. Lorsqu'une seule valeur est indiquee, celle-ci prevaut pour les deux axes X et Y. Avec deux valeurs, celles-ci 
s'appliquent a I'axe des X et des Y. 



Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset="iso-8859-l"> 
<style type="text/css"> 
div { border: lpx solid black; 
background-color: #9cf; 
width: lOOpx; height: 50px; } 
#box { margin: 40px 50px; 

-moz-transf orm: scale (2); 

-webkit-transform: scale (2); 

-o-transf orm: scale(2); 

transform: scale (2);} 
</style> 
</head> 
<body> 
<divx/div> 

<div id="box" style=" "></div> 

</body> 

</html> 
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Deformation oblique 

Une deformation oblique d'un element est obtenue par le parametre shew (angle) ou Tangle peut etre defini en degres 
(deg), radians (rad) ou gradiants (grad). Les valeurs positives effectuent la rotation de I'element dans le sens des 
aiguilles d'une montre et les valeurs negatives tournent celui-ci dans le sens inverse. Lorsqu'une seule valeur est 
indiquee, celle-ci prevaut pour les deux axes X et Y. Avec deux valeurs, celles-ci s'appliquent a Taxe des X et des Y. 



Exemple 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l "> 

<style type="text/css"> 

#box { width: lOOpx; height: lOOpx; 

border: lpx solid black; 

background-color: #9cf; 

margin-left: 50px; 

-moz-transf orm: skew (-30deg) ; 

-webkit-transform: skew (-30deg) ; 

-o-transf orm: skew ( -3 Odeg) ; 

transform: skew (-30deg) ; } 
</style> 
</head> 
<body> 
<px/p> 

<div id="box" style=" "></div> 

</body> 

</html> 
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Deplacement 



Le deplacement d'un element est obtenu par le parametre translate (longueur) ou la longueur peut etre definie en px, 
%, em, in, mm, cm. Les valeurs positives effectuent, sur I'axe des X, un deplacement vers la droite et vers la gauche 
pour les valeurs negatives. Pour I'axe des Y, une valeur positive effectue le deplacement vers le haut et une valeur 
negative vers le bas. Lorsqu'une seule valeur est indiquee, celle-ci prevaut pour les deux axes X et Y. Avec deux 
valeurs, celles-ci s'appliquent a I'axe des X et des Y. 

Exemole 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset=" iso-8859-1 "> 

<style type="text/css"> 

#box { width: lOOpx; height: lOOpx; 

border: lpx solid black; 

background-color: #9cf; 

-moz-transf orm: translate (220px, 0); 

-webkit-transform: translate (220px, 0) ; 

-o-transf orm: translate (220px, 0); 

transform: translate (220px, 0); 
</style> 
</head> 
<body> 
<px/p> 

<div id="box" style=" "></div> 

</body> 

</html> 
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Pour tester toutes les transformations possibles, ne manquez pas de consulter le site 
http://www.westciv.com/tools/transforms/. 
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Les transitions 

Les proprieties CSS3 transition apportent du mouvement dans le design de la page, a I'instar de ce qui se realise avec 
du JavaScript. 



Les animations se realisent principalement a partir de quatre proprietes : 



transition-property 


Precise les proprietes CSS a animer, par exemple, la couleur (color) et la 
largeur (width). Ces proprietes sont precisees en les listant, separees 
par des virgules. 

Le mot-cle ail (defaut) designe toutes les proprietes animables de 
I'element. 


transition-duration 


Precise la duree de la transition. Celle-ci est exprimee en s (seconde) ou 
ms (milliseconde). 


trans it ion-timing- function 


Precise la fonction de transition a utiliser : 

ease : rapide sur le debut et ralenti sur la fin. 

linear : vitesse constante sur toute la duree de I'animation. 

ease-in : lent au debut et accelere de plus en plus vers la fin. 

ease-out : rapide sur le debut et decelere sur la fin. 

ease-in-out : le depart et la fin sont lents. 


transition-delay 


Precise le retard (ou I'avance) du depart de la transition. Celui-ci est 
exprime en s (seconde) ou ms (milliseconde). 



Le raccourci transition evite de reprendre chaque propriete. 



transition: width 2s ease, height 3s linear; 

La propriete transition est prise en charge par presque tous les navigateurs de notre etude (Firefox 4 + , Opera 10. 6 + , 
Safari 4+, Chrome 4+). Elle est par contre ignoree par Internet Explorer 9. 

Exemple 1 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 
<meta charset=" iso-8859-1 "> 
<style type="text/css"> 
.transition a { padding: 8px; 

text -decor at ion : none; 

color: black; 

border-bottom : lpx solid black; 

-webkit-transition : border Is ease-out ; 

-moz-transition : border Is ease-out; 

-o-transition : all Is ease-out; 

transition: border Is ease-out;} 
.transition a:hover{ border-bottom: 50px solid #9cf ; } 
</style> 
</head> 
<body> 

<nav class="transition"> 
<a href="#">Accueil</a> 
<a href="#">Html5</a> 
<a href="#">CSS3</a> 
<a href="#">Contact</a> 
</nav> 
</body> 
</html> 
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Exemple 2 

La presentation de contenu sous forme d'accordeon connalt un franc succes sur la toile. La propriete CSS3 transform 
permet de realiser cet effet uniquement par des feuilles de style, sans faire appel a du code JavaScript. 



<!DOCTYPE html> 
<html lang="fr"> 
<head> 

<title>Html5</title> 

<meta charset="iso-8859-l"> 

<style type="text/css"> 

. verticalaccordion>ul { margin: 0; 

padding: 0; 

list-style: none ; 

width: 300px; } 
. verticalaccordion>ul>li { 
display :block; 
overflow: hidden; 
margin: 0; 
padding: 0; 
list-style: none ; 
height : 30px; 
width: 300px; 

background-color: rgb ( 2 15 , 2 3 , 2 4 5 ) ; 
-webkit-border-radius : 7px; 
-moz-border-radius : 7px; 
border-radius: 7px; 

transition: height 0.3s ease-in-out; 
-moz-transition : height 0.3s ease-in-out; 
-webkit-transition : height 0.3s ease-in-out; 
-o-transition : height 0.3s ease-in-out;} 
. verticalaccordion>ul>li>h3 { 
display :block; 
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margin: 0; 
padding : lOpx; 
height : 1 9px; 

border-top:#f0f0f0 Ipx solid; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 80%; 
color: #000; 

background: rgb (185, 205, 225) ; } 

. verticalaccordion>ul>li>div { margin: 0; 

overflow: auto; 

padding: lOpx; 

height : 150px; } 
. verticalaccordion>ul>li : hover { height: 150px; } 
. verticalaccordion : hover >ul>li : hover>h3 { 
color:#fff; 

background: rgb (125, 165, 205) ; 
font-size: 80%;} 

. verticalaccordion>ul>li>h3 : hover { cursor : pointer ; } 

</style> 

</head> 

<body> 

<div class="verticalaccordion"> 

<ul> 

<li> 

<h3>Item K/h3> 
<div> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non 

risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing 

nec, ultricies sed, dolor. Cras elementum ultrices diam. 

</div> 

</li> 

<li> 

<h3>Item 2</h3> 
<div> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non 

risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing 

nec, ultricies sed, dolor. Cras elementum ultrices diam. 

</div> 

</li> 

<li> 

<h3>Item 3</h3> 
<div> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non 

risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing 

nec, ultricies sed, dolor. Cras elementum ultrices diam. 

</div> 

</li> 

<li> 

<h3>Item 4</h3> 
<div> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non 

risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing 

nec, ultricies sed, dolor. Cras elementum ultrices diam. 

</div> 

</li> 

</ul> 

</div> 

</body> 

</html> 
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Item 1 




Lorem ipsura dolor sit amet, consectetuer 
adipiscing elit. Sed non risus. Suspendisse 
lectus toitor, dignissim sit amet adipiscing 
nec : ultricies sed = dolor. Cras elemeiiTum 
ultrices diam 



Item 3 
Item 4 
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